What is colour contrast?

Contrast is the difference in brightness between text and its background. Too little and text is hard to read, especially on phones in sunlight and for the many people with low vision or colour blindness. The contrast ratio puts a number on it, from 1:1 (no difference) to 21:1 (black on white).

What contrast ratio do I need?

The Web Content Accessibility Guidelines (WCAG) set two levels. AA, the level most accessibility laws and guidelines refer to, needs 4.5:1 for normal text and 3:1 for large text (24px, or about 18.5px bold) and for icons, input borders and buttons. AAA, the stricter level, needs 7:1 for normal text and 4.5:1 for large text.

How to fix low contrast

Keep the hue and change the lightness: darken the text or lighten the background (or the other way round) until the ratio passes. Pure grey text on white is a common mistake: #777777 just fails AA, while #767676 just passes. Bright brand colours like yellow, light green and orange rarely work as text on white, so use them for backgrounds with dark text instead.

Frequently asked questions

Does contrast apply to logos?

No. WCAG exempts logos and brand names from the contrast rules. But a logo that is hard to see still does its job badly, so it is worth checking.

Is colour blindness covered by contrast?

Partly. Good contrast helps everyone, but don’t rely on colour alone to carry meaning: add icons, labels or underlines too.