What the ratio means
WCAG contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). The thresholds that matter:
- 4.5:1 — minimum for normal text at level AA, the standard most laws and design systems require
- 3:1 — minimum for large text (18pt+/24px, or 14pt+/18.5px bold) and for UI components like icons and input borders
- 7:1 — level AAA for normal text, worth targeting for body copy people read for minutes at a time
Roughly 1 in 12 men has some form of color vision deficiency, and everyone's vision degrades on a phone in sunlight. Contrast isn't a compliance chore — it's the cheapest UX upgrade that exists.
Quick fixes when you fail
- Darken the text before you lighten the background — text color moves the ratio faster.
- Grey text on white fails constantly: #767676 is the lightest grey that passes AA on pure white.
- Text over photos almost never passes raw — add a scrim (dark overlay) or a solid text panel.
FAQ
Is WCAG legally required?
Increasingly yes: the ADA (US, via court precedent), the European Accessibility Act (in force since June 2025), and equivalent laws elsewhere all lean on WCAG. AA is the level regulators cite.
Does this work for dark mode?
Yes — the math is identical, just enter your dark background and light text. Watch out for pure white on pure black though: many designers soften it (e.g. #e8e8e8 on #121212) to reduce halation glare while still passing AAA.