WCAG colour contrast, explained without the maths

What the 4.5:1 and 3:1 thresholds mean, which text they apply to, and the mistakes that fail an audit even when the palette looks fine.

What the ratio measures

Contrast ratio compares the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). It is a perceptual approximation, not a measure of hue difference — two colours can be wildly different in hue and still fail, which is why bright yellow on white is unreadable while dark blue on white is fine.

The thresholds

Where audits usually fail

A workable process

Test the pairing before committing it: the Contrast Checker shows the ratio with AA/AAA pass marks for both text sizes. If a colour fails, adjust lightness rather than hue — convert to HSL with the Color Converter and darken until it passes, keeping the brand hue intact.

Contrast is not the whole story, either: check the palette under the Color Blindness Simulator, because a red/green pairing that passes contrast can still be indistinguishable for roughly one in twelve men.

Do not chase 21:1

Pure black on pure white maximises the ratio but is uncomfortable for long reading and can worsen halation for some dyslexic readers. Aim comfortably past the threshold — around 7:1 to 12:1 for body text — rather than at the extreme.

Tools used in this guide