Skip to content

Why Red and Green Status Colours Fail

Why red and green specifically

Normal colour vision uses three cone types, sensitive to long, medium and short wavelengths — roughly red, green and blue. The red and green cones respond to heavily overlapping parts of the spectrum, and the brain distinguishes the two colours by comparing their responses.

When one of those cone types is missing or shifted, that comparison largely collapses. Reds and greens of similar brightness converge toward the same muddy yellow-brown. Deuteranomaly, a shifted green cone, is the most common form and affects roughly 6% of men; around one in twelve men and one in two hundred women has some form of colour vision deficiency.

For a product with any meaningful number of users, that is not an edge case. It is a predictable share of the audience for whom a red-and-green indicator conveys nothing at all.

Why a better shade of red is not the answer

The instinctive response is to hunt for a red and a green that survive simulation. It is possible, but it is a fragile fix: it constrains your palette severely, it depends on simulation matrices being accurate for a given individual, and it still fails completely for achromatopsia, where there is no colour vision at all.

It also does nothing for the many situations where colour is unavailable for other reasons — a page printed in greyscale, a screen in bright sunlight, a user with a display filter enabled, or a screen reader that never sees colour in the first place.

What actually fixes it

WCAG success criterion 1.4.1 states the principle directly: colour must never be the only means of conveying information. That reframes the problem from colour selection to design, and the solutions are straightforward.

Pair every status colour with a shape — a tick for success, a cross or triangle for error. Icons carry the meaning where hue cannot.

Label chart series directly on the lines rather than through a colour-keyed legend, which removes the colour-matching task entirely and reads better for everyone.

Vary lightness as well as hue between colours that must be told apart. A palette that survives being printed in greyscale generally survives colour vision deficiency too, which makes greyscale a useful quick test.

Keep the colours — they are genuinely helpful for the majority. Just never let them be the only signal.

Frequently asked questions

Is this the same as the contrast requirement in WCAG?
No, they are separate criteria. 1.4.3 covers whether text is legible against its background, measured as a contrast ratio. 1.4.1 covers whether meaning is carried by colour alone. A design can pass one and fail the other, so both need checking.
What contrast should there be between two colours that must be distinguishable?
There is no formal requirement for non-text colour pairs, but a ratio of at least 3:1 between them after simulation is a reasonable working threshold. Below that they tend to read as the same swatch rather than as two distinct states.
Do colour blindness browser extensions replace proper testing?
They are useful for a quick check but they simulate rather than reproduce the experience, and the approximations vary between tools. The reliable test is structural: turn the interface greyscale and confirm every piece of information is still available.

Try the Color Blindness Simulator

See how a colour looks to people with the eight main types of colour vision deficiency, and check whether two colours stay distinguishable.

Open tool

More guides