Understanding contrast
Designing for the eye on the bus.
The maths behind WCAG ratios — and why a 4.5:1 minimum is more generous than it sounds.
What contrast actually is.
The WCAG contrast ratio compares two colours by their relative luminance — how bright each one would appear to the human eye. Pure white has a luminance of 1, pure black 0, and everything else lies between. The ratio is the lighter luminance plus 0.05, divided by the darker plus 0.05. Pure black on pure white scores 21:1, the maximum.
(L₁ + 0.05) / (L₂ + 0.05)
Why 4.5:1 and 3:1.
WCAG 2.1 AA asks for at least 4.5:1 for normal body text and 3:1 for large text (18pt regular or 14pt bold and up). AAA tightens both to 7:1 and 4.5:1. The ratios were calibrated against measured ability of low-vision and colour-deficient readers — they're not arbitrary. Hitting AA is realistic for almost any real palette; hitting AAA pushes you toward the extremes of the colour space and is hard for branded UI.
A worked check.
Consider #666666 on #FFFFFF. The grey has a relative luminance of about 0.13, the white is 1.0. The ratio is (1 + 0.05) / (0.13 + 0.05) = 5.74. That passes AA for body text. Drop the grey to #999999 and the ratio falls to 2.84 — failing both AA body and AA large. The eye on the bus, on the bright morning train, on the kitchen-counter phone, deserves the heavier number.
#666 vs #999 on white
Lum ≈ 0.13 vs 0.32; both against 1.0 (white)
The lighter the foreground, the smaller the gap to the background.
1.05/0.18 = 5.74 1.05/0.37 = 2.84
= 5.74:1 passes; 2.84:1 fails
Why brand colours fail.
Saturated mid-tones — that one blue everyone wants for buttons, that one orange every CTA seems to use — cluster around the luminance value where text against white can fall just below 4.5:1 and against black just above. The fix is rarely "find a new colour" and more often "make this one a touch darker for text, a touch lighter for backgrounds." A two-tone variant of your brand colour, one for foreground use and one for background, almost always solves it.
Beyond text — UI and graphics.
WCAG 1.4.11 covers non-text contrast: form borders, focus rings, icons that carry meaning. The threshold is 3:1 against the adjacent background. That's why focus rings need to be visible on whatever cards or panels they sit on, not just on the page's bare white. Disabled controls are explicitly exempt — they communicate "you can't interact with this" partly by being lower-contrast.
WCAG 3 and APCA.
The next major version of WCAG is moving toward APCA — the Accessible Perceptual Contrast Algorithm — which models how contrast feels at small text sizes more accurately than the luminance ratio. APCA is more forgiving for pure black on pastel backgrounds and stricter for thin grey text on white. Today, AA against the existing ratio is still the binding rule; APCA is the direction designers can already start aiming.
Read next