Colour Contrast Ratios Explained: WCAG 4.5:1 and 3:1
Low-contrast text is one of the most common accessibility failures on the web, and one of the easiest to fix. WCAG defines contrast as a ratio between 1:1 (no contrast) and 21:1 (black on white).
The requirements (WCAG 2.2)
| What | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥ 18 pt, or ≥ 14 pt bold) | 3:1 | 4.5:1 |
| Icons, input borders, focus indicators and other UI parts | 3:1 | — |
Logos and purely decorative text are exempt. Disabled controls are exempt too, though they still need to be understandable.
How the ratio is calculated
Each colour is converted to a relative luminance between 0 (black) and 1 (white) using the sRGB formula. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. Because the eye is not linear, mid-greys behave unexpectedly: #777777 on white is about 4.48:1 — just failing AA for normal text — while #767676 passes at about 4.54:1.
Fixing a failing colour
- Check the pair in Contrast Checker.
- Keep the hue and darken (or lighten) only the lightness until the ratio passes — the brand colour stays recognisable.
- Use the brand’s bright colour for large elements and backgrounds, and a darker shade of it for text and links.
- Re-check hover, focus and disabled states, and dark mode.
Is 4.5:1 enough for everyone?
It is the AA minimum. People with low vision benefit from more; aim higher for body text where you can.
Does contrast apply to text on images?
Yes. Add a solid or semi-transparent overlay behind the text and test the worst area of the image.