Color Accessibility: The Complete WCAG Guide for Designers
Around 1 in 12 men and 1 in 200 women have a color-vision deficiency; hundreds of millions more have low vision, aging eyes, cheap panels or bright sunlight. Color accessibility isn't an edge case — it's designing for how vision actually varies. And it's law in much of the world (ADA, EAA, Section 508).
WCAG contrast requirements
| Content | AA | AAA |
|---|---|---|
| Normal text (<18pt) | 4.5:1 | 7:1 |
| Large text (≥18pt / 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
Ratios come from relative luminance — check any pair instantly with our contrast checker, which also suggests passing alternatives.
Never rely on color alone
WCAG 1.4.1 requires a second cue wherever color carries meaning: icons with status dots, underlines on links, labels on chart series, patterns in maps. This single principle covers the majority of color-blindness failures — test yours with the color-blind simulator.
Building accessible palettes by construction
Design in OKLCH and reserve L bands: text colors at L ≤ 0.45 on light backgrounds, backgrounds at L ≥ 0.93, and your scale automatically passes most checks. Choose categorical data colors that differ in lightness, not just hue. And test dark mode separately — inverted palettes often fail where light mode passed.