How Do You Design for Colour Blindness?

Who is affected

Colour vision deficiency affects roughly 8% of men and 0.5% of women of Northern European descent, with somewhat lower rates in other populations. On a site with 10,000 monthly visitors, that is several hundred people who see the palette differently from the designer. It is the most common sensory difference designers have to accommodate, and the one most often ignored because the designer, statistically, does not have it.

The main types:

• Deuteranomaly and deuteranopia (reduced or absent green sensitivity) are by far the most common. Reds, greens, browns and oranges blur together.
• Protanomaly and protanopia (red) produce similar confusion, with reds appearing darker.
• Tritanopia (blue) is rare; blues and greens, yellows and pinks confuse.
• Achromatopsia, total colour blindness, is very rare.

Because red-green deficiencies dominate, the practical work is mostly about not relying on the red-green axis.

The pairs that fail

Combinations that look distinct to most people and collapse for common deficiencies:

Pair	Fails for	Common use that breaks
Red and green	Deutan, protan	Error/success, stop/go, negative/positive numbers
Green and brown or orange	Deutan, protan	Map layers, chart series
Blue and purple	Deutan, protan	Links vs visited, chart series
Light green and yellow	Deutan, protan	Status badges, heatmaps
Grey and pink or pale red	Protan	Disabled vs error states
Blue and green	Tritan	Chart series

A red "required" asterisk, a green tick, a red-to-green traffic-light scale, and a chart with red and green lines are the four most common failures on business sites, and all four are fixed by the same rule.

The rule that fixes most of it

Colour is never the only carrier of meaning. Whatever colour says, something else says too.

• An error field is red and has an icon and a message.
• A success state is green and has a tick and says "Saved".
• A chart series is a colour and a line style or marker shape and a direct label.
• A required field is marked with an asterisk and the word "required", not a coloured border.
• A link is coloured and underlined, at least in body text.
• A status badge is coloured and contains a word.

This is WCAG success criterion 1.4.1, "Use of Color", at level A, the most basic level of conformance. It costs almost nothing and it is the single change that makes the largest difference. It also helps everyone reading on a dim screen, a bad projector or a greyscale print.

Palette guidance

Vary lightness, not just hue. Two colours that differ in lightness remain distinguishable even when the hue difference disappears. A dark blue and a light orange survive every deficiency; a mid-red and a mid-green do not. When building a colour system, check that adjacent semantic colours differ in luminance.

Prefer blue and orange as the primary contrast pair. They are distinguishable across all common deficiencies and have become a convention in data visualisation for that reason.

Use established colour-blind-safe palettes for charts. The Okabe-Ito palette, Paul Tol's schemes and ColorBrewer's colour-blind-safe sets are tested and free. Limit categorical series to six or seven; beyond that, no palette works, and the answer is direct labels or small multiples.

Meet contrast requirements. Text contrast of 4.5:1 for body and 3:1 for large text and interface components helps colour-blind users as much as anyone, because lightness contrast is what survives.

Avoid red-to-green scales. For heatmaps and gauges, use a single-hue lightness ramp or a blue-to-orange diverging scale.

Testing

Simulators show a screen as a person with each deficiency would see it. Chrome and Firefox developer tools have a rendering emulation for protanopia, deuteranopia, tritanopia and achromatopsia; Figma has plugins; macOS and Windows have system-level filters. Run every key screen through the deuteranopia simulation at minimum, and look for anything whose meaning has disappeared.

The better test is the rule: cover the screen in greyscale and check whether every state, status and series is still identifiable. If it is, colour was not working alone.

Beyond the basics

Offer a high-contrast or alternative palette mode where the product is used heavily, such as a dashboard. Provide pattern fills as an option in charts. Write alt text and data tables for charts, which serve screen-reader users as well. And include people with colour vision deficiency in usability testing when you can; one participant catches what a simulator does not.

The decision

Designing for colour blindness is not a separate accessibility project. It is one rule applied consistently, a palette chosen with lightness in mind, and a simulator run before shipping. Sites that do this look no different to most visitors and work for the several percent who were being excluded. If you would like your palette and key screens checked, book a call; it is a short review with a short list of fixes.

Common questions