Roughly one in twelve men and one in two hundred women have some form of colour vision deficiency. On any site with real traffic, a meaningful slice of your audience cannot tell apart colours you might be treating as obviously different. The good news is that one rule fixes most of the problem.
What colour blindness actually is
Most colour blindness is not seeing in greyscale — that type exists but is very rare. It is certain hues collapsing together.
Normal colour vision uses three types of cone in the eye, tuned to roughly red, green and blue. In the common deficiencies one type is missing or shifted, so colours that rely on that channel to be told apart start to look the same.
- Deuteranopia and protanopia are the red-green types, and between them account for the large majority. Reds, greens, browns and oranges become hard to separate.
- Tritanopia is the blue-yellow type, and is rare. Blues and greens, and yellows and pinks, blur together.
The practical upshot is the same in every case: some pairs of colours that look distinct to you are, to a colour-blind user, nearly identical.
The pairings that fail
Red and green is the famous one, and it is everywhere for exactly the wrong reasons:
- Red “error” and green “success” states — indistinguishable to the most common deficiency, and this is the single most frequent accessibility failure in interfaces.
- Red and green lines on a chart with no other distinction.
- A “required field” marked only by turning red.
Because red-green deficiency is the common case, these are close to worst-case choices. The information is carried entirely by the one distinction that a large group cannot make.
The one rule
Never let colour be the only carrier of meaning.
Whenever colour communicates something, add a second signal that does not depend on colour:
- A success message gets a tick and the word “Success”, not just a green background.
- Chart lines get different shapes — solid, dashed, dotted — or direct labels, not just different colours.
- A required field gets an asterisk or the word “required”, not just a red outline.
- A selected item gets a border or a checkmark, not only a colour change.
Follow this one rule and the large majority of colour-blindness problems simply do not arise, because the meaning survives even when the colour difference does not. It also tends to make interfaces clearer for everyone — a tick reads faster than “the green one”.
Where contrast still matters
Colour blindness is about distinguishing hues; it does not reduce sensitivity to lightness. That is useful, because it means the contrast work you do for legibility helps here too.
Two colours that differ clearly in lightness stay distinguishable to most colour-blind users even when their hues collapse — a dark red and a light green remain “dark one, light one”. Two colours that differ only in hue at the same lightness become a single colour. So when a pairing must rely on colour, make the two sides differ in lightness, not just hue.
Testing your work
Simulating the three types shows you which pairings collapse — this site’s simulator applies the standard matrices to your palette so you can see it directly. It is a fast way to catch the obvious failures.
Treat it as a first pass, not a certificate. The matrices are approximations, and nothing replaces the discipline of the one rule: if you have followed the colour with a second signal everywhere it carries meaning, you are covered whether the simulation is perfect or not.