Accessible colour: a practical guide to WCAG contrast
Low-contrast text is the most common accessibility failure on the web — and one of the easiest to fix. This guide explains the numbers, the thresholds and a workflow that catches problems before they ship.
Who this actually affects
Colour-vision deficiency affects roughly 8% of men and 0.5% of women — in a typical audience of a thousand people, that's around forty who see your reds and greens differently. But the case for contrast is much broader than colour blindness. Everyone's contrast sensitivity declines with age, starting around forty. Cheap screens crush dark tones. Sunlight washes out phones. Night mode, tired eyes, cracked screens — every user is situationally impaired sometimes. Contrast is not a niche concern; it is basic legibility engineering.
What a contrast ratio actually measures
The Web Content Accessibility Guidelines (WCAG) compare the relative luminance of two colours — roughly, how bright each one appears to the human eye, which weights green heavily, red moderately and blue only slightly. The result is a ratio between 1:1 (two identical colours) and 21:1 (pure black on pure white). Because luminance is what matters, two hues that look "obviously different" can still fail: saturated red on saturated green is famously unreadable at around 1.3:1, while navy on cream sails past 12:1.
The thresholds to remember
| Use | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (≈24px, or 19px bold) | 3:1 | 4.5:1 |
| UI components & graphics (icons, borders, chart segments) | 3:1 | — |
Two details people miss: the 3:1 rule also applies to non-text elements — form field borders, toggle states, focus rings and chart colours, not just words — and placeholder text is still text; the pale grey placeholder in most forms fails AA by a wide margin.
Designing for colour blindness
The common forms of colour-vision deficiency (protanopia and deuteranopia) compress reds and greens towards similar muddy tones; the rarer tritanopia affects blues and yellows. You cannot fix this by picking "safer" reds and greens — you fix it by never letting hue carry meaning alone:
- Pair error/success states with an icon or a word, not just red/green.
- Differentiate chart series with lightness steps and labels, not hue alone — a palette whose colours also differ in lightness survives every type of colour blindness.
- Underline links, or bold them — colour-only links vanish for some readers.
Simulating it, rather than imagining it
Reasoning about colour blindness in the abstract is hard; looking at it is easy. The Vision check control under the workspace redraws your palette as it appears with protanopia, deuteranopia, tritanopia or achromatopsia, using the physiologically-based model published by Machado, Oliveira and Fernandes in 2009 — the same approach behind most reputable simulators.
What to look for is simple: any two swatches that merge into one. That pair is a pair your interface must not rely on to carry meaning. If your success and error states collapse into the same olive under deuteranopia, they need an icon, a label or a shape difference as well as a colour difference.
Two things the simulation deliberately does not change: your hex values and your contrast ratios. WCAG contrast is defined on the actual colours a screen emits, not on a simulation of how they are perceived, so the ratios stay calculated from the real values. Achromatopsia is also a useful proxy for something more mundane than a visual difference — greyscale printing, photocopies, and e-ink.
A testing workflow that takes two minutes
Test the combinations you will actually ship, not the palette as a strip of swatches. In the JUMI Colour Generator, the built-in contrast checker lets you set any palette colour as foreground and any other as background: it reports the exact ratio, live text previews at both sizes, and pass/fail badges for AA and AAA. Check your body-text pair, your button-label pair and your link colour against every background it appears on. If a pair fails, don't discard the hue — darken or lighten one side until it passes; lightness, not hue, is almost always the fix (see our colour theory guide for why).
Decorative uses — gradient backgrounds, illustrations, brand flourishes — don't need to pass anything, provided no one has to read text sitting on them without a legible treatment.
Related guides: Colour theory basics · Dark mode palettes · Colour in a design system