PlayInfoBox

Home /Converter /WCAG Color Contrast: How the Ratio Is Calculated and What Passes

WCAG Color Contrast: How the Ratio Is Calculated and What Passes

A contrast ratio turns "does this text look readable to me" into an objective number anyone can check against a published standard.

The ratio formula

Contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker one. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).

Relative luminance isn't just RGB averaged

Luminance is calculated from gamma-corrected RGB channels weighted unevenly β€” roughly 21% red, 72% green, and 7% blue β€” because human eyes are far more sensitive to green light than to red or blue.

AA for normal text: 4.5:1

The WCAG 2.1 Level AA standard, the most commonly required baseline, requires at least a 4.5:1 ratio for standard body text.

AA for large text: 3:1

Text counted as "large" (roughly 18pt regular or 14pt bold and up) only needs a 3:1 ratio at AA level, since bigger text is inherently easier to read at lower contrast.

AAA is a stricter, optional tier

Level AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. It is not required for most compliance standards but is recommended where readability is especially critical.

Non-text elements have their own rule

WCAG 1.4.11 requires a 3:1 ratio for meaningful graphics and interactive UI components (like button borders or form field outlines) against their adjacent colors, separate from the text contrast rules.

Why contrast ratio isn't just a matter of taste

Two colors can look "readable enough" to one person and genuinely illegible to someone with low vision or color vision deficiency. The ratio formula replaces subjective judgment with a number that accounts for how differently human eyes perceive luminance across the color spectrum, giving designers and reviewers a shared, testable target instead of an opinion.

Common ways to fix a failing pair

The most reliable fix is darkening the darker color or lightening the lighter one until the ratio clears the threshold, since hue changes alone often don't move the number much. It also helps to check both the text-on-background and any inverted or hover-state combinations, since a passing default state can still hide a failing interactive state.

Frequently Asked Questions

Does font size actually change the requirement?

Yes. Larger and bolder text is inherently easier to distinguish from its background, so WCAG sets a lower bar (3:1 instead of 4.5:1) for text that qualifies as "large" under the standard's size and weight thresholds.

Is a higher contrast ratio always better?

For accessibility compliance, meeting or exceeding the required threshold is what matters, and AAA is a genuinely stricter, optional target. That said, extremely high contrast (like pure black on pure white) can cause eye strain for some readers over long reading sessions, so many designers treat AA as a solid, comfortable baseline rather than always chasing the maximum possible ratio.