Designing for color blindness

Roughly 8% of men and 0.5% of women have some form of colour vision deficiency. That is around one in twenty people overall, and more in an audience skewed male. It is not rare, and most of the people affected have never been formally diagnosed. They simply find certain interfaces harder to use and rarely mention it.

What it actually is

Colour vision uses three cone types, sensitive to roughly long, medium and short wavelengths. Colour is derived from the ratios between their responses. Change one cone's sensitivity, or remove it, and regions of colour space that used to give different ratios now give the same one.

The consequence is specific and worth stating precisely. Colours do not simply look duller; instead, particular pairs become the same colour. Under deuteranopia, a red and a green at similar lightness are identical, which is worse than being hard to tell apart.

The forms, in order of how often you will encounter them:

• Deuteranomaly: reduced green sensitivity. By far the most common, and a spectrum from barely noticeable to severe.
• Deuteranopia: no green cones. Red and green collapse together.
• Protanomaly and protanopia: the red equivalents. Reds also look much darker.
• Tritanomaly and tritanopia: blue and yellow. Rare.
• Achromatopsia: no colour discrimination at all. Very rare.

Red-green covers almost all of it. If you only ever check one thing, check deuteranopia.

The pairs to stop reaching for

Any two colours that differ mainly in hue while sharing similar lightness. In practice:

• Red and green, the pair nearly every status indicator uses.
• Green and brown, common in charts, maps and data tables.
• Blue and purple: visited and unvisited links, selected states.
• Light green and yellow: success next to warning.
• Pink and grey: subtle highlights against neutrals.

The red/green status light is the single most common failure on the web, and it is everywhere: build pipelines, form validation, availability indicators, stock levels, pass/fail dashboards.

The fix is redundancy, not new colours

The instinct is to hunt for a colour-blind-safe palette. That helps, but it treats the symptom. The reliable fix is to stop making colour the only carrier of the message.

Add a second cue. A tick and a cross as well as green and red. The word "Error" next to the red border. A dashed line as well as a different colour in a chart. A pattern fill on a bar. A position difference in a legend. Once meaning survives without hue, the colour becomes decoration, and decoration can be whatever you like.

Separate by lightness. Where colour must do the work alone, make the pair clearly different in lightness rather than in hue. Lightness survives every deficiency. A rough guide: a contrast ratio of about 1.6 or more between the two means the difference is still visible when hue is gone. The contrast checker gives you the number.

Label directly. A chart with labels on the lines needs no legend, and a legend is where colour-only encoding usually hides.

Do not rely on hue for small things. Thin strokes, small dots and one-pixel borders are hard for everyone. Colour differences shrink with size.

Checking your work

Simulation is useful for one narrow, checkable thing: finding pairs that carry meaning and stop being different. Run your palette through the simulator under deuteranopia first, then protanopia, then tritanopia. Anything the tool flags as collapsing that also cannot be separated by lightness is a real problem.

Then do the thing a simulator cannot: turn the whole page greyscale and ask whether it is still usable. If the answer is yes, you are in good shape for every form of colour vision deficiency at once, because you have stopped depending on hue.

What simulation cannot tell you is how anything looks to someone. It models cone response, not perception, adaptation, or a lifetime of learning to read the cues that remain. Someone with deuteranomaly is often much better at distinguishing shades than a simulation suggests. Use the tool to find broken encodings rather than to imagine an experience.

A short checklist

• No status is ever communicated by colour alone.
• Charts: label the series directly, or vary line style as well as colour.
• Form errors: icon plus message plus colour, not colour plus a red ring.
• Links in body text: underlined, not just coloured.
• Required fields: marked with text, not a red asterisk alone.
• Selected states: a border, a check or a background change, not a hue shift.
• Greyscale test on the finished page.

Almost all of that is also better for everyone else: on a dim phone screen, in sunlight, on a cheap monitor, or printed in black and white. So redundant cues are better thought of as clearer design than as a cost paid for accessibility.