Designing for Colour Blindness: A Practical Guide

Roughly one in twelve men and one in two hundred women sees colour differently from the way most palettes assume. That's not a rounding error — in a room of a hundred people it's several of them, quietly unable to tell your red apart from your green. The good news: designing for them barely costs you anything, and it makes your work clearer for everyone.

What colour blindness actually is

"Colour blind" is a misleading name. Almost nobody sees in greyscale. What most people have is a reduced ability to distinguish certain hues, because one type of colour receptor in the eye is weak or missing.

By a wide margin, the commonest form is trouble telling red from green — reds, greens, oranges and browns smear together. A rarer form muddles blue and yellow. So here's the takeaway that matters. Red and green are the risky pair. Any design that hangs on the difference between them is quietly shutting people out.

One habit that fixes most of it

If you remember nothing else: never let colour be the only thing carrying a message.

Picture the classic trap: a status system where red means bad and green means good, told apart by hue alone. To someone with red-green deficiency, those two dots are identical. And the fix isn't to drop colour — it's to add a second signal. A check and a cross. The words "paid" and "overdue". An up arrow and a down arrow. Colour then becomes a helpful reinforcement instead of a secret code, and honestly the design reads faster for everyone, colour vision or not.

A short, practical checklist

• Pair colour with a shape, icon or label. Especially for status, alerts, and anything in a chart.
• Lean on lightness, not just hue. Two colours that differ in brightness stay distinguishable even when the hue difference is lost. If your categories only differ in hue, add a light-to-dark step.
• Don't put red text on green (or the reverse). It can be both low-contrast and indistinguishable — the worst of both.
• Label your charts directly instead of relying on a colour-coded legend the reader has to decode.
• Underline your links, or otherwise mark them, rather than signalling them with colour alone.

Test it, don't guess it

You can't un-see colour to check your own work, so use a simulation. The Contrast Checker includes a colour-blindness preview that shows your pair as different types of colour vision would see it — a quick way to catch a combination that collapses. And because lightness contrast is what saves you when hue fails, keeping pairs above the WCAG thresholds does double duty; the same tool measures that too.

When you're picking the colours in the first place, favouring ones that differ in brightness as well as hue makes everything downstream easier. Nudge for that in the Picker as you choose.

Common questions

What's the most common type of colour blindness?

Red-green deficiency, by far. It makes reds, greens, oranges and browns hard to tell apart, and it's why those pairings deserve the most care.

Do I have to avoid red and green completely?

No. You can use them freely — just don't make the difference between them the only way to understand something. Back it up with text, icons or brightness.

How do I check my design?

Run key colour pairs through a colour-blindness simulation and keep them above the contrast thresholds. The Contrast Checker does both at once.

Designing for colour blindness isn't a special mode you switch on for a minority. It's a handful of habits — a second signal, a brightness difference, a direct label — that make your work legible to everyone. Preview a pair the way others see it in the Contrast Checker.