If text on your site is light grey on white, some people simply cannot read it. Colour contrast is one of the most common and most fixable accessibility problems, and there are clear, measurable rules for getting it right. Here is what the WCAG contrast guidelines actually mean, without the standards-document jargon.
What a contrast ratio is
Contrast is measured as a ratio between the brightness of the text and the brightness of its background, from 1:1 (identical, invisible) up to 21:1 (black on white). The higher the ratio, the easier the text is to read. WCAG, the web accessibility guidelines, sets minimum ratios you should meet.
AA: the level most sites aim for
- 4.5:1 for normal body text.
- 3:1 for large text (roughly 18.66px bold, or 24px regular and up).
- 3:1 for interface components and meaningful graphics, like form borders and icons.
AA is the level referenced by most accessibility laws and the sensible target for a normal website.
AAA: stricter, for when it matters
- 7:1 for normal text.
- 4.5:1 for large text.
AAA is hard to hit across a whole design and is usually reserved for content where readability is critical. Meeting AA well is a realistic, worthwhile goal for most people.
Why large text gets an easier pass
Bigger, heavier letters are simply easier to make out, so the standard allows a lower ratio for them. That is why a pale heading can pass while the same colour in body text fails. Always check your body text first, because that is where contrast problems hurt most.
You do not have to calculate any of this. Paste your text and background colours into the WCAG contrast checker and it tells you the ratio and whether it passes AA and AAA for normal and large text. Fix anything that fails by darkening the text or lightening the background until it passes, and your content becomes readable for far more people.