WCAG Contrast Checker

The headline and the main paragraph text are almost never the problem. Founders pick a readable body colour early and leave it alone. What fails is everything around it: the grey timestamp under a card, the placeholder text in a form field, the disabled button that still needs to be readable, the caption under a chart, the footer links. These get styled late, usually by nudging opacity down until it “looks right” on a bright laptop screen, and they routinely land around 2.5:1.

A quick way to audit your own site: list every distinct text colour you actually ship, not every colour in the design file. Most products have between four and seven. Run each one against the surfaces it appears on — your page background, your card background, and any tinted or branded panel. That is usually a dozen checks and it catches nearly everything. Fixing them at the token level, rather than per component, means the fix holds as the product grows.

One caveat that trips people up: the WCAG 2.1 formula is a ratio of relative luminance, and luminance is dominated by the green channel. That makes the maths noticeably unkind to some pairings and far too generous to others. Mid-grey on black tends to score better than it looks, while the same grey on white scores worse than it looks. If a pairing passes at 4.6:1 but still feels thin on a dark interface, trust your eyes and check it with the APCA calculator, which models perceived lightness instead.

Worth remembering that contrast is only the floor. Passing AA does not make a colour a good choice — pure saturated red on pure white clears 4.5:1 and is still unpleasant to read for a paragraph. If you are still settling on your scheme, start from the colour palette generator and test the candidate text colours here before you commit them to CSS variables.