Colour vision deficiency: what breaks when colour is the only cue

What it is

The retina’s colour vision depends on three cone types with different spectral sensitivities. Inherited colour vision deficiency arises when one of those cone types is absent or its sensitivity is shifted, and the genes for the long- and medium-wavelength cones sit on the X chromosome, which is why the condition is far more common in men. Absence of a cone type produces dichromacy — protanopia for the long-wavelength cone, deuteranopia for the medium — while a shifted sensitivity produces anomalous trichromacy, protanomaly or deuteranomaly, in which discrimination is compressed rather than lost. Tritan defects, affecting the short-wavelength cone, are much rarer, and complete achromatopsia is rarer still.

Anomalous trichromacy is more common than outright dichromacy, which means colour vision deficiency is a spectrum rather than a switch. Many affected users can name most colours correctly in isolation and still fail to distinguish two similar hues in a five-millimetre chart swatch, or a one-pixel line on a graph, or a status dot at sixteen pixels. Small, desaturated, low-contrast colour samples are the hard case, and interfaces are made almost entirely of small, desaturated, low-contrast colour samples.

Prevalence is well characterised. Jennifer Birch, reviewing population surveys in the Journal of the Optical Society of America A in 2012, reports inherited red–green deficiency in about 8 per cent of men and about 0.4 per cent of women of European descent, and between 4 and 6.5 per cent of men of Chinese and Japanese ethnicity. For a product with any meaningful user base, that is not an edge case; it is a segment.

The problem is also broader than the condition. Colour arrives at the eye through a pipeline you do not control: an uncalibrated panel, a cheap projector, a greyscale printout, direct sunlight on a phone, a dark-mode theme that inverts your palette, tinted driving glasses, or a screenshot pasted into a document and compressed. Designing for colour vision deficiency produces an interface that also survives all of those.

The level attached to this page makes the point by taking the colour channel away. It presents nine cards, each bearing the name of a colour and each rendered in a colour that is deliberately not the one it names, and asks you to find the card whose text names a particular colour. Every hue on screen is a lie; the words are the only reliable data. That is the everyday position of a user for whom your red and green badges are the same badge. The interference you feel while doing it is the Stroop effect, which has its own page.

Why it works on people

Colour is genuinely attractive to designers because it is one of the few channels that works pre-attentively — you can find the red row without reading the table. That property is real, and it is exactly why colour ends up carrying meaning alone: it works so well in the designer’s own eyes that the redundant label feels like clutter and gets cut in review.

The failure is then invisible to the team that shipped it. A designer with normal colour vision cannot perceive the ambiguity they have created, no automated test fails, and affected users rarely file a bug that says "your palette excludes me" — they work around it, guess, or leave. The absence of complaints is not evidence that the encoding works.

Red and green are the worst possible pair for the most common semantic distinction in software. Pass and fail, up and down, profit and loss, available and taken, added and removed: the convention that carries the highest-stakes information in dashboards, diffs and financial interfaces is aligned precisely with the axis most likely to be compressed.

Because anomalous trichromacy compresses rather than eliminates discrimination, the failure is often partial and context-dependent. The same user may read your palette correctly on a large filled area and misread it in a legend, which makes the problem look intermittent and easy to dismiss.

Where you meet it

• Form validation that marks an invalid field with a red border and nothing else, and a valid one with a green border and nothing else.
• Required fields indicated by a red asterisk where red is the only thing distinguishing it from decoration.
• Charts with a colour legend rather than direct labels, especially line charts where the sample in the legend is a short stroke a few pixels thick.
• Continuous data rendered in a rainbow or jet colourmap, which is non-monotonic in perceived brightness and scrambles under both colour vision deficiency and greyscale conversion.
• Build, deployment and uptime dashboards where status is a coloured dot of uniform shape and size.
• Diff and code review views where added and removed lines differ only in background tint, without a plus or minus in the gutter.
• Seat, room and calendar pickers where availability is a fill colour with no text or icon on the cell.
• Inline links styled at the same weight and without underlines, distinguished from body text by hue alone.
• Maps and transit diagrams where lines are identified by colour and named only in a legend elsewhere on the page.

Designing around it

• Encode every meaningful distinction at least twice, and make the second channel a non-colour one: a word, an icon with a distinct silhouette, a fill pattern, a position, or the number itself. WCAG 2.2 success criterion 1.4.1 (Use of Color, Level A) is the baseline requirement — colour must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element.
• Give status indicators different shapes as well as different colours. A circle for healthy, a triangle for warning and a square or octagon for failure remains legible at sixteen pixels, in greyscale, and in a screenshot pasted into an incident report. Uniform dots do not.
• Label chart series directly on or beside the series rather than in a legend. This removes the need to match a small colour sample against a thin line, and it is faster for every reader, not only for colour-deficient ones. Where a legend is unavoidable, also vary line style — solid, dashed, dotted — and marker shape.
• Replace rainbow and jet colourmaps with perceptually uniform ones. Nuñez, Anderton and Renslow set out the method in PLOS ONE in 2018 and published cividis, a derivative of viridis optimised so that readers with and without red–green deficiency draw nearly identical conclusions from the same image. Any map that increases monotonically in brightness also degrades gracefully to greyscale.
• For the pass/fail semantic specifically, move off the red–green axis or add a large luminance difference. Blue and orange is the standard substitution and survives every common deficiency; if brand constraints force red and green, make the green markedly lighter or darker than the red so the pair remains distinguishable by brightness alone.
• Meet WCAG 2.2 success criterion 1.4.11 (Non-text Contrast, Level AA) for the graphics that carry meaning: at least 3:1 against adjacent colours for user interface components and graphical objects, alongside 4.5:1 for normal-size text under 1.4.3. Contrast between a badge and its background is a separate requirement from contrast between two badges, and both matter.
• Never write copy that identifies a control by its colour. "Press the green button" fails for colour-deficient users, for anyone using a high-contrast or dark theme, and for screen reader users, and it is the case WCAG 2.2 success criterion 1.3.3 (Sensory Characteristics, Level A) rules out. Name the control, then mention its appearance only as reinforcement.
• Test with two passes, and treat the greyscale one as authoritative. Run a colour vision deficiency simulator for protanopia, deuteranopia and tritanopia, then convert the same screens to greyscale. Greyscale is the stricter proxy: anything still unambiguous in greyscale will survive every deficiency, every bad display and every printout. Put both passes in the design review checklist so they happen before implementation rather than after an accessibility audit.
• Do not count hover or tooltips as the redundant channel. They are unavailable on touch, awkward for keyboard users, and absent from screenshots — so the information that only appears on hover is, for practical purposes, information you did not provide.

Questions

What is colour vision deficiency?

It is a reduced or absent ability to discriminate certain hues, caused by a missing cone type in the retina or by a shift in one cone type’s spectral sensitivity. The most common forms affect the red–green axis, and because the relevant genes are on the X chromosome the condition is much more frequent in men than in women.

How many people are affected by colour blindness?

Population surveys reviewed by Birch in 2012 put inherited red–green deficiency at about 8 per cent of men and about 0.4 per cent of women of European descent, and at 4 to 6.5 per cent of men of Chinese and Japanese ethnicity. Prevalence varies by population, so the rate for a specific product depends on where its users are.

Is it enough to avoid red and green together?

No. Avoiding the red–green pair removes the most common failure but not the underlying one, because deficiencies also compress other hue distinctions and because colour reaches the user through displays, lighting and printing you do not control. The reliable rule is redundancy: any distinction that matters should also be readable from text, shape, pattern or position.

How do I test an interface for colour blindness?

Run a simulator for protanopia, deuteranopia and tritanopia over real screens, then convert the same screens to greyscale and check that every distinction still reads. The greyscale pass is the stricter test and the faster one: if the interface remains unambiguous with all hue removed, it will hold up under any colour vision deficiency, on a bad display, and in a printout.

Related patterns

• The Stroop Effect: when a label and its colour disagree
• Signifiers: an affordance nobody can see is not a feature
• The cocktail party effect: picking one channel out of a noisy screen
• Placeholder text as a label: what breaks and what to do instead