Meet Contrast Requirements Without Flattening Your Palette
How WCAG contrast ratios work, which thresholds apply where, and how to fix a failing pair.
Contrast under WCAG 2 is a ratio between the relative luminance of two colours, running from 1:1 for identical colours to 21:1 for black on white. It is a computed value, not an opinion, which makes it one of the few design decisions you can verify.
Know which threshold applies
Normal body text needs 4.5:1 for AA and 7:1 for AAA. Large text — roughly 24px, or 19px bold — drops to 3:1 and 4.5:1. Interface components and meaningful graphics need 3:1 against their surroundings.
Adjust lightness before hue
When a brand pair fails, changing lightness usually fixes it while keeping the palette recognisable. Darkening text or lightening the background moves the ratio far more efficiently than shifting hue.
Colour is never the only signal
Passing a ratio does not make a design accessible on its own. Status, links, and errors need a second cue — an icon, underline, or label — so the meaning survives for people who cannot distinguish the hues.