Color blindness is a design constraint, not an edge case
Around one in twelve men cannot distinguish some of the color pairs in your interface. That is not an accessibility footnote, it is a larger group than Safari users.
↑ Click any of these to repaint the entire site with it.
Roughly 8% of men and 0.5% of women have some form of color vision deficiency. In a product with a hundred thousand users that is several thousand people. It is a bigger group than most of the browser and device segments teams routinely build for.
It is also one of the few accessibility considerations that is genuinely cheap to design for, provided you know the rule.
The rule#
Color must never be the only carrier of meaning.
That is the whole thing. Everything else is implementation detail.
If a user has to distinguish red from green to know whether their build passed, the design has a defect. If they have to distinguish two chart series by hue alone, the chart has a defect. If your form field turns red on error and nothing else changes, the form has a defect.
What actually happens#
The common forms all involve the long and medium wavelength cones — the red and green receptors, which sit close together in the spectrum to begin with.
| Type | Prevalence in men | Effect |
|---|---|---|
| Deuteranomaly | ~5% | Weak green cones. The most common by far. |
| Protanomaly | ~1% | Weak red cones; reds appear darker. |
| Deuteranopia | ~1% | No green cones. |
| Protanopia | ~1% | No red cones. |
| Tritanopia / tritanomaly | ~0.01% | Blue–yellow. Very rare. |
| Achromatopsia | ~0.003% | No color vision at all. |
Note the shape of that table: red–green is essentially the entire problem. Blue–yellow deficiency is rare enough that it rarely drives decisions, and complete color blindness is rarer still.
Note also that anomalous trichromacy — weak cones rather than missing ones — is far more common than the complete forms. Most simulators show you dichromacy, which is the worst case. Real experience for most affected users sits somewhere between the simulation and normal vision.
Red and green, specifically#
Here is the pair every product uses for success and failure:
And here is approximately how that pair lands for deuteranopia:
Two olive-browns, a few points apart. If those are your only signal, the signal is gone.
Four fixes, in order of effectiveness#
1. Add a second channel. An icon, a word, a shape. A checkmark next to green and a cross next to red costs almost nothing and solves the problem completely. This is the fix; everything below is a supplement.
2. Separate on lightness, not just hue. Lightness difference survives every form of color vision deficiency. If your two states differ by 30 points of OKLCH lightness as well as by hue, they stay distinguishable even when the hue collapses. This is free — you just have to decide it deliberately instead of picking both colors at the same lightness because they looked balanced in the swatch row.
3. Choose safer hues. Blue and orange survives every common deficiency, which is why so much data visualization uses it. If you need two categorical colors and they cannot carry labels, use those two.
4. Do not rely on saturation alone. A "muted" and "vivid" version of the same hue are frequently indistinguishable for anomalous trichromacy.
Where it bites in practice#
Charts. The single worst offender. A six-series line chart with a color legend is unusable for a significant fraction of readers. Direct labels on the lines fix it entirely, and they are better for everyone else too.
Status. Build pipelines, form validation, availability indicators, diff views. Green-add / red-delete in a diff is nearly universal and nearly always relies on hue alone; the good ones also use + and - markers.
Links in body text. If the only thing distinguishing a link from surrounding text is that it is blue, and the blue is not much lighter or darker than the text, some readers will not find it. Underlines are not a stylistic relic — they are the second channel.
Heat maps. Red-to-green is the worst possible choice and remains stubbornly popular. Use a single-hue sequential scale, or a diverging scale that goes through a light neutral.
The uncomfortable part#
You cannot fully design your way out of this with color choices. Some information genuinely needs two colors that will always be hard for some people to separate, and no palette solves it.
That is fine. It is what the second channel is for. Accept that color is a fast, pleasant, imprecise signal for most users and an absent one for some, and never let it be the only thing carrying the message.