Color contrast and accessibility (WCAG)
Updated on June 30, 2026 · by Rafael Rossi
Enough contrast between text and background is essential for people with low vision — and helps everyone read better.
Contrast ratio
It ranges from 1:1 (identical colors) to 21:1 (black on white), computed from each color's luminance.
WCAG levels
- AA: at least 4.5:1 for normal text, 3:1 for large text.
- AAA: at least 7:1 for normal text.
What counts as "large text"
From 18 pt (24 px) regular, or 14 pt (18.66 px) bold. Larger text needs less contrast (3:1 at AA) because letter shapes are already easier to tell apart.
Practical tips
Avoid light gray on white (the top contrast-failure). If small text doesn't hit 4.5:1, darken the color or enlarge/bolden the font. Don't use color alone to convey meaning (e.g. "fields in red"): color-blind users may miss it.
FAQ
Does contrast apply to icons and buttons? Yes. Graphical and UI elements need at least 3:1 against the background (WCAG 2.1).
Why does contrast help everyone? It improves reading in bright sun, on cheap screens and for tired eyes — not just for low vision.