WCAG Color Contrast: What 4.5:1 Actually Means and How to Hit It
How contrast ratio is computed, the difference between AA and AAA, the large-text exception, why gray-on-white designs fail, and how OKLCH makes fixing contrast systematic.
The ratio, demystified
Contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). Luminance is not the average of RGB channels — it is weighted by human sensitivity (green counts ~6× more than blue) and gamma-corrected. This is why two colors that "look similar in brightness" can measure very differently, and why eyeballing contrast fails.
- WCAG AA (the legal baseline in many jurisdictions): 4.5:1 for body text, 3:1 for large text (18pt+, or 14pt bold) and UI components.
- WCAG AAA: 7:1 for body text — appropriate for reading-heavy products and low-vision audiences.
- Placeholder text, disabled buttons and decorative elements are exempt — but users still have to read your placeholders, so treat the exemption skeptically.
Why fashionable gray fails
The classic failure is #999999 body text on white: it measures 2.85:1, well short of 4.5:1, yet it appears in countless designs because it "looks clean." The darkest gray that passes AA on pure white is roughly #767676. Muted design and accessible design are compatible — but only if you check, because the eye adapts and the designer’s calibrated monitor is the best-case scenario your users will never share.
Fixing contrast without wrecking the palette
In OKLCH color space, the L channel tracks perceived lightness directly. That turns contrast repair into a mechanical operation: keep hue and chroma, move only L until the ratio passes. The color stays recognizably "your brand blue" — just far enough from its background to read. In sRGB/HSL this is trial and error; in OKLCH it is a slider.
Beyond text: the 3:1 rules people miss
- Form input borders need 3:1 against the page background — the invisible-input pattern fails audits.
- Focus indicators need 3:1 against adjacent colors; removing outlines without a replacement is the most common keyboard-accessibility failure.
- Charts need 3:1 between adjacent series or a redundant channel (patterns, direct labels) — color-only encoding excludes roughly 1 in 12 men with color-vision deficiency.