Colour & Contrast
Colour becomes serious the moment someone has to read it.
A palette can be beautiful and still fail the one test that matters — can a real person, on a real screen, actually read it? Contrast isn’t taste; it’s a measurable promise that the reader won’t have to fight the page. And colour that carries meaning — red for error, green for done — has to work for the one in twelve men who can’t tell those two apart.
So this module makes colour legible and inclusive. You’ll measure a real contrast ratio, look at a chart through colour-blind eyes, and watch a status message survive — or vanish — when the colour is stripped away.
- Read a contrast ratio and know instantly whether text passes AA or AAA.
- Predict how your colours look to someone with colour-blindness — and stop relying on red-vs-green.
- Give every state two signals — colour plus an icon, shape, label or position.
- Repair a form where pale text, colour-only errors and dead buttons quietly lock people out.
Put a number on it
“Looks fine to me” is not a standard. The gap between text and its background can be measured as a contrast ratio, from 1:1 (invisible) to 21:1 (pure black on white). The guideline floors are simple: body text should clear 4.5:1 for AA, 7:1 for AAA; large text can go a little lower.
Pick a text colour and a background below. The ratio and the pass/fail badges update live — and the real sample text gets easier or harder to read as you go. Start from the muted grey it opens on and drive it to a pass.
WCAG vs APCA
The single WCAG ratio is blunt: it judges a tiny caption and a huge headline the same way, and it can misread light-on-dark text. APCA — the perceptual model coming with WCAG 3 — scores contrast closer to how we actually read. Here’s the same colour pair, judged by both.
Through other eyes
Around 1 in 12 men and 1 in 200 women see colour differently — most often red and green, the two hues designers lean on hardest for “bad” and “good”. If your only difference between an error and a success is red versus green, a lot of people see the same murky tone twice.
Switch the lens below. The same chart and the same Paid / Failed pills, simulated through the common types of colour-vision. Watch the red and green bars slide toward each other.
Strip the colour, then check
The fix for all of it is one rule: never let colour be the only signal. If a green dot means “good” and a red dot means “bad”, add a tick and a cross, a word, a shape or a position — anything that survives when the colour doesn’t.
Here are two ways to show the same statuses. Hit strip colour — the colour-only row turns into two identical grey dots, while the colour-plus-shape row still says exactly what it means.
The rule that makes colour safe
Ratios and simulators are tools. One rule sits above them and decides whether your colour excludes anyone.
Never signal with hue alone.
Colour is a wonderful second layer of meaning and a dangerous only one. The moment a colour carries information — this field failed, that plan is recommended, this line is the important one — pair it with something that isn’t colour: an icon, a shape, a word, a position, a pattern, or plain value contrast. Do that and the message survives colour-blindness, a greyscale print, a glary screen in the sun, and a cheap monitor with the saturation turned down.
The same discipline covers legibility. Text is a promise the reader won’t have to strain, so treat the contrast ratio as a hard floor, not a nice-to-have — and remember small text and disabled text still have to be read, not just seen. “Muted” is a design choice; illegible is a bug.
So the working rule is short: measure the contrast, check it through other eyes, and give every meaningful colour a partner. Accessibility done this way doesn’t dull a design — it forces the clarity that makes it better for everyone.
Repair this checkout form
A form that quietly locks people out: pale grey labels, an error shown only in red, and a button nobody can read. Walk the repair — first make everything legible, then make the states survive without colour.
Which is more legible?
Five face-offs. Same content, two colour treatments — one readable and inclusive, one not. Pick the stronger, then see the verdict.
When colour locked people out
Three teams shipped colour that looked fine to them and failed real users. Hit greyscale test to see what a colour-blind or low-contrast user actually got.
The red/green status
An ops dashboard showed system health as red or green dots — nothing else. Colour-blind engineers couldn’t tell healthy from down. Adding a tick, a cross and a label made status readable for the whole team.
The pale grey text
A marketing site set body copy in light grey “for elegance” — about 2.5:1. Readers with any glare or age-related vision simply skipped it. Darkening to a 7:1 near-black lifted time-on-page sharply.
The rainbow chart
A finance chart used red, green, yellow and purple lines with no labels. For colour-blind readers three of them merged. Direct labels plus a value-stepped single hue for the key series made it universally readable.
Two signals, not one
Accessible interfaces rarely look “accessible” — they just always pair colour with a second cue. Here a form error and a link, each carrying meaning two ways at once.
Red, yes — but also a warning icon, a thicker border and a plain-language message. Remove any one and it still reads.
Colour alone can hide a link from colour-blind readers. The underline makes it unmistakable, in colour or out.
This module is where value comes back to do the heavy lifting — a contrast ratio is really a value measurement with a number attached. It keeps the palette honest (a colour that fails contrast can’t hold a text role) and protects the accent (it must stand out for everyone, not just the fully-sighted). Next, the colour system bakes these floors in as tokens, so accessible contrast is the default, not a final-day audit.
The Contrast glossary
Six words that turn “is this readable?” into a precise answer. Tap a card to flip it.
Questions you actually ask
What people get wrong
The accessibility checklist
Seven checks that catch almost every colour-accessibility bug before it ships. Run them on any screen.
✅ Before you ship colour
Read the contrast
Ten questions in seven formats, tagged by thinking level — each with layered hints: a nudge, the reasoning, then a deeper connection. A wrong answer opens a door, never a dead end. Served from the question bank, never hardcoded.