Design
Colour contrast: how much does text need to be readable?
What a contrast ratio like 4.5:1 means, the WCAG thresholds for normal text, large text and buttons, and real colour pairs that pass or fail, with the numbers worked out.
What the ratio means
Contrast ratio compares how bright two colours are, from 1:1 (identical, invisible) to 21:1 (black on white). The calculation uses *relative luminance*, which weights green much more heavily than blue because our eyes are more sensitive to it. That is why a saturated blue can look bold but still have weak contrast, and why yellow on white is nearly unreadable.
The formula is (lighter + 0.05) ÷ (darker + 0.05), using the luminance of each colour. Color Converter & Palette works it out for any pair you choose.
The thresholds to remember
The Web Content Accessibility Guidelines (WCAG) set these minimums:
- 4.5:1 for normal body text (level AA).
- 3:1 for large text: at least 24 px regular, or about 18.7 px bold (level AA).
- 3:1 for icons, input borders and other parts of the interface people need to see (WCAG 2.1).
- 7:1 for normal text, and 4.5:1 for large text, at the stricter level AAA.
AA is the level most laws and company policies refer to. Logos and purely decorative text are exempt.
Real pairs, worked out
- Black on white: 21:1, the maximum.
- Near-black #1d1d1f on white: 16.83:1.
- Grey #595959 on white: 7.0:1, just reaches AAA.
- Grey #767676 on white: 4.54:1, the lightest neutral grey that passes AA for body text.
- One step lighter, #777777 on white: 4.48:1, fails. The difference is invisible to most people, but the threshold is strict.
- Blue #0071e3 on white: 4.70:1, passes AA. The same blue on near-black #1d1d1f: 3.58:1, fine for large text or a button outline, too low for body text.
- White on pure red #ff0000: 4.0:1, fails for normal text, passes for large text.
- White on orange #ff9f0a: 2.06:1, fails everything; black on the same orange: 10.22:1.
We calculated every ratio with the WCAG formula; Color Converter & Palette gives the same results.
Why it matters beyond accessibility rules
Low contrast doesn’t only affect people with low vision. Everyone reads worse on a phone in sunlight, on a cheap projector or on a screen with brightness turned down to save battery. Light grey text that looks elegant on a designer’s monitor can disappear in a meeting room. Meeting 4.5:1 is a quick way to make sure your text survives real conditions.
Fixing a failing pair
- Darken the text or lighten the background, not both at random. Keep the hue and lower the lightness in HSL: the converter shows tints and shades of your colour, each with its code.
- Swap white text for black on bright colours like orange, yellow and light green.
- Make it larger. If a brand colour reaches 3:1 but not 4.5:1, use it for headings and buttons, and a darker shade for body text.
- Don’t rely on colour alone to show meaning, such as red for errors; add an icon or a word too.