A Practical Guide to Color Contrast and Web Accessibility
Low-contrast text looks trendy in mockups and becomes a genuine barrier the moment real people with real screens, real lighting, and real vision differences try to read it. Contrast ratio gives that subjective problem an objective number.
What contrast ratio actually measures
Contrast ratio compares the relative luminance (perceived brightness) of two colors, expressed as a ratio from 1:1 (identical, no contrast) to 21:1 (pure black on pure white, maximum contrast). WCAG — the Web Content Accessibility Guidelines — defines minimum ratios that text needs to meet to remain readable for people with low vision or color vision deficiencies.
The thresholds that matter
| Level | Normal text | Large text (18pt+/14pt bold+) |
|---|---|---|
| WCAG AA (standard) | 4.5:1 | 3:1 |
| WCAG AAA (enhanced) | 7:1 | 4.5:1 |
AA is the widely adopted baseline for most websites and is often a legal requirement in accessibility regulations; AAA is a stricter standard reserved for content where maximum readability matters most.
Why this isn't just a compliance checkbox
Low contrast doesn't only affect people with diagnosed visual impairments. It affects anyone reading a phone screen in bright sunlight, anyone with age-related vision changes, and anyone simply tired at the end of a long day. Designing for good contrast is designing for the full range of real-world reading conditions, not an edge case.
Common contrast mistakes
- Light gray text on white. A popular "subtle" aesthetic that frequently fails even the AA threshold.
- Text over photographic backgrounds. Contrast varies across the image, so text that's readable in one area may fail in another — a solid overlay often solves this.
- Assuming brand colors are automatically accessible. A brand's primary color might look bold and distinct visually while still failing the numeric contrast requirement against a given background.
A practical workflow
Check contrast early in the design process, not as a final audit step — retrofitting color choices after a design is built is far more disruptive than choosing accessible pairs from the start. When a combination fails, the fix is usually simpler than a full palette overhaul: darkening or lightening one color by a small amount is often enough to cross the threshold.
Frequently asked questions
The ratio itself is calculated the same way regardless of size, but WCAG allows a lower minimum ratio for large text (18pt+ or 14pt+ bold), since larger text is inherently easier to read at lower contrast.
WCAG also defines a separate 3:1 minimum for graphical objects and UI component boundaries (like form input borders), though the specific requirements differ slightly from text contrast rules.
Conclusion
Contrast ratio turns a subjective design choice into a measurable, testable standard. Check early, aim for AA at minimum, and treat strong contrast as a usability feature rather than a compliance obligation.
Check your own colors with the Color Contrast Checker.