Color contrast refers to the difference in luminance or color between two elements in a user
interface (UI) or user experience (UX) design. It involves comparing the foreground (text or
graphic) color with the background color on which it is placed. The goal is to ensure that there is
enough differentiation between these colors to make the content easily readable and distinguishable.
High color contrast improves readability, especially for users with visual impairments or color
vision deficiencies. It ensures that text and other content are easily distinguishable from the
background, enhancing the overall accessibility of the design.
Considering color contrast is a fundamental aspect of inclusive design. It accommodates users with
various abilities and ensures that everyone, regardless of their visual capabilities, can access and
interact with digital content.
Web Content Accessibility Guidelines (WCAG) 2.1 defines how to make Web
content more accessible to people with
disabilities. Accessibility involves a wide range of disabilities, including visual, auditory,
physical, speech,
cognitive, language, learning, and neurological disabilities.
WCAG 2.0 level AA mandates a minimum contrast ratio of 4.5:1 for regular text and 3:1 for text of
larger size.
Meanwhile, WCAG 2.1 specifies a contrast ratio of at least 3:1 for graphics and user interface
elements, including
form input borders. For the highest accessibility standard, WCAG Level AAA, a contrast ratio of at
least 7:1 is
required for normal text, and 4.5:1 for larger text.
Larger text is defined as either 14-point (typically 18.66px) and bold or larger, or 18-point
(typically 24px) or
larger.
