visual design
Colour contrast
What is colour contrast?
Colour contrast is the measurable difference in brightness between text and its background, written as a ratio from 1:1 (invisible) to 21:1 (black on white). It decides whether words are comfortable to read or quietly exclude people.
Also known as: color contrast, contrast ratio
The demo
Drag the slider to lighten the text on this white card, and watch the contrast ratio. Notice it can still look readable to you well after it fails the standard that keeps it readable for everyone.
The quick brown fox jumps over the lazy dog.
…
Drag the slider and watch the ratio cross the pass / fail lines.
What this demo shows (text version)
A line of text on a white background, with a slider that controls how light or dark the text is. As the text is made lighter, the contrast ratio between text and background falls, and the demo shows the live ratio plus two badges: AA (the 4.5:1 threshold for normal text) and AAA (7:1).
The point is that text can still look readable to the person adjusting it for a good while after the ratio has dropped below 4.5:1 and the AA badge has flipped to fail - which is why low contrast is such a common accessibility problem. Contrast must be measured against the thresholds, not judged by eye.
As you dragged the text lighter it stayed perfectly readable to you - right up until the ratio crossed 4.5:1 and the badge flipped to fail. That line is not about whether you can read it; it's about whether everyone can. Low contrast is the most common accessibility failure precisely because it looks fine to the person who chose it.
The thresholds that matter: 4.5:1 for normal text and 3:1 for large or bold text to meet WCAG AA, and 7:1 for AAA. Large text gets a lower bar because size buys back some legibility. These are floors, not targets - clearing 4.5:1 by a hair still leaves out plenty of people in bright sun or with ageing eyes.
Contrast is about luminance, not hue, so two colours can clash loudly and still fail - a vivid red on a vivid green is a contrast disaster despite feeling bold. And never carry meaning by colour alone; pair it with text or shape, so the message survives both low contrast and colour blindness. Check ratios with a tool, every time - your own eyes are the least reliable judge.