Color Contrast (WCAG)

WCAG specifies minimum contrast relationships so text and important visual information remain distinguishable. Frontend engineers use contrast ratios to check whether foreground content is sufficiently distinguishable from its background.

Color contrast describes the difference in relative luminance between two colors, typically a foreground and its background. For accessibility, this matters because insufficient contrast can make text, controls, and meaningful visual information difficult to perceive.

WCAG expresses contrast as a ratio from 1:1 to 21:1. A ratio of 1:1 means the two colors have equal relative luminance, while 21:1 represents the maximum possible difference between black and white.

For WCAG 2.x, normal-sized text generally needs at least 4.5:1 for Level AA, while large text needs at least 3:1. Level AAA raises the text requirements to 7:1 for normal text and 4.5:1 for large text. The applicable success criterion and text size should therefore be checked rather than relying on a single universal threshold.

Contrast requirements also apply to certain non-text content. For example, WCAG 2.1 Success Criterion 1.4.11 requires a 3:1 contrast ratio for meaningful graphical objects and user-interface components against adjacent colors, with specified exceptions. Decorative content and some inactive or user-agent-controlled states can be treated differently under the relevant criteria.

Key points

• Contrast ratio compares the relative luminance of foreground and background colors.
• WCAG 2.x AA generally requires 4.5:1 for normal text and 3:1 for large text.
• WCAG 2.x AAA generally requires 7:1 for normal text and 4.5:1 for large text.
• WCAG 2.1 SC 1.4.11 uses a 3:1 threshold for applicable non-text UI components and graphical objects.
• Contrast should be checked for text states, controls, icons, borders, and other meaningful visual information where the relevant WCAG criterion applies.

Interview questions

What is a WCAG contrast ratio?

A contrast ratio measures the difference in relative luminance between two colors, such as text and its background. It ranges from 1:1 to 21:1. A higher ratio means greater luminance separation. WCAG uses these ratios to define minimum contrast requirements for applicable content.

What contrast ratio does WCAG AA require for text?

For WCAG 2.x, Level AA generally requires a minimum ratio of 4.5:1 for normal-sized text. Large text generally has a lower threshold of 3:1. The exact applicability depends on the relevant WCAG success criterion and definition of large text.

Why can't I determine accessibility by comparing RGB values directly?

RGB channel values do not correspond linearly to perceived brightness, so directly comparing their numerical differences is not the WCAG method. WCAG contrast calculations use relative luminance derived from the colors. The resulting luminances are then combined using the contrast-ratio formula. This produces a measure that can be compared with the applicable WCAG threshold.

How should a frontend engineer handle contrast for buttons and icons?

First identify whether the visual is subject to a non-text contrast requirement or a text requirement. Under WCAG 2.1 SC 1.4.11, applicable user-interface components and meaningful graphical objects generally need at least 3:1 contrast against adjacent colors. Engineers should also test relevant states such as focus and selected states where the criterion applies. Contrast should be considered alongside other accessibility requirements rather than treated as the only requirement.

What are common mistakes when implementing an accessible color system?

A common mistake is validating only the default state while overlooking focus, hover, selected, or other applicable states. Another is testing only text and ignoring meaningful controls or graphics covered by non-text contrast requirements. Teams can also accidentally introduce failures when design tokens change without automated contrast checks. A robust system therefore validates semantic color pairs and relevant component states against the applicable WCAG criteria.