About 1 in 12 men and 1 in 200 women have colour-vision deficiency, most of it red-green. This guide explains the types in perception terms, why "never use colour alone" is the rule that does the work, and how to choose palettes that stay distinguishable — with simulators as checkers, not designers.
Colour-vision deficiency (CVD) is not a rare edge case at web scale: red-green deficiency alone affects roughly 8% of men and 0.5% of women of Northern European descent, with meaningful rates in every population. On a site with a million visitors, that is tens of thousands of people for whom your red error state and your green success state may be the same state — and whose experience of your charts depends entirely on decisions you make in the palette, not on any setting they can change.
Designing for CVD is frequently misunderstood as avoiding red and green. The real discipline is subtler and more transferable: never let hue be the only channel carrying information, choose palettes whose members differ in lightness as well as hue, and verify with simulation while designing with separation of concerns. Here is the working method.
Key takeaways
- The types: protan (red-weak/blind) and deutan (green-weak/blind) are the common pair; tritan (blue-yellow) is rare and usually acquired, not inherited.
- Rule one is channel redundancy: pair every colour signal with an icon, label, pattern, position or underline.
- Palettes survive CVD when adjacent colours differ in lightness, not just hue — test your palette in greyscale as a first approximation.
- Simulators show you a specific viewer's confusion lines; they are verification tools, not a substitute for redundant encoding.
What colour-blind readers actually see
Normal colour vision is trichromatic: three cone types sensitive roughly to long (red), medium (green) and short (blue) wavelengths. In protanopia and deuteranopia one of the first two channels is absent; in protanomaly and deuteranomaly it is shifted, producing partial confusion. The practical result: reds, greens, browns and oranges along certain confusion lines collapse toward one another, and — for protan types specifically — reds also appear significantly darker, because the long-wavelength channel contributes much of red's brightness.
Two consequences are under-appreciated. First, a saturated red warning on a black background can be nearly invisible to a protan reader even at good nominal contrast, because their luminance for that red is a fraction of yours. Second, blue-yellow (tritan) confusion, while rare congenitally, can be acquired through age and eye conditions, and it particularly afflicts the blue/purple and green/yellow distinctions that interfaces use casually. Design that separates by lightness and labels by text is robust to all of it, including the varieties you have never heard of.
The master rule: colour is never the only channel
- Form errors: red border plus an error icon plus a written message that says what is wrong. Any one channel can fail a given reader; all three failing together is rare.
- Required fields: an asterisk or the word 'required' — not merely a colour change on the label.
- Status in tables and dashboards: words or symbols (Paid, Overdue, ▲, ●) inside the cell, not just a coloured dot or row tint.
- Links in body text: underlines, because blue-versus-black is a hue distinction that will not survive every reader — this is also a WCAG requirement in effect, via the use-of-colour criterion.
- Charts: direct labels at the line or bar end, distinct dash patterns per series, and markers of different shapes. A legend keyed only by colour squares is a puzzle, not an explanation.
Notice that every item on that list also helps everyone else — in bright sunlight, on a cheap projector, in greyscale printing. Redundant encoding is not an accommodation bolted on; it is simply information design with its failure modes considered.
Choosing palettes that keep their distance
When colour must distinguish categories — chart series, map regions, status sets — choose for separation on two axes at once. Start from a CVD-aware palette: the best-known is the Okabe–Ito palette, eight colours designed to remain distinguishable under all common deficiencies (orange #E69F00, sky blue #56B4E9, bluish green #009E73, yellow #F0E442, blue #0072B2, vermilion #D55E00, reddish purple #CC79A7, black). Its members succeed by differing in lightness and blue-yellow position as much as in red-green position.
If brand colours constrain you, apply the same principle inside your ramps: pick series colours from different lightness steps, avoid the classic red/green pairing as your only distinction (add shape or label where you cannot avoid it), and cap categorical palettes around six to eight entries — beyond that, even fully sighted readers start confusing neighbours, and direct labelling becomes the honest solution anyway.
Verification that means something
- Greyscale pass: screenshot key screens in greyscale. If any meaning evaporates, redundancy is missing — this crude test catches most sins.
- Simulator pass: run the same screens through protanopia and deuteranopia simulation (browser dev tools offer rendering emulations; design tools have plugins). Check specifically: statuses, charts, links, focus states.
- Contrast pass: CVD does not change WCAG ratio obligations; measure your text pairs as usual, remembering protan readers experience saturated reds as darker than the formula says.
- Real-reader pass, where possible: one session with a colour-blind user outperforms a month of simulation for finding the confusions nobody modelled.
Mistakes and pitfalls
Solving CVD by swapping red/green for blue/orange everywhere
Wholesale hue swaps ignore tritan confusion, brand semantics (red means error across cultures and tools) and every non-colour channel you still owe the reader. Redundancy fixes the problem; relocation merely moves it.
Treating simulation screenshots as the experience
A simulator shows a trichromat an image of what confusions occur; it cannot show the lived experience, and it flatters designs that 'pass the filter' while still relying on colour alone at a subtler level. Simulate to verify, design with redundancy.
Rainbow heatmaps and traffic-light dashboards
Continuous red-to-green scales are the single worst offender in data products: the middle of the scale is precisely where red-green confusion lives. Single-hue sequential scales (light-to-dark of one colour) read correctly for everyone.
Common questions
Do I need to avoid red and green entirely?
No — you need to avoid making red-versus-green the sole carrier of a distinction. Christmas can stay; the error-versus-success coding must gain icons and words, and chart series need labels or patterns.
Which deficiency should I test first?
Deuteranopia and protanopia, in that order of prevalence — most simulators bundle them together as 'red-green'. Add tritanopia if your palette leans on blue/yellow distinctions for meaning.
Are there colours nobody confuses?
Blue is the most robust hue axis for the common deficiencies, and lightness contrast is robust for everyone, including readers with total colour blindness (achromatopsia, extremely rare). When a distinction truly matters, lightness plus a label beats any hue choice.
To wrap up
Designing with colour blindness in mind turns out to be designing with information in mind: hues take their place as one channel among several, lightness does the heavy distinguishing, and words and symbols close the gaps no palette can. The readers who benefit include the one in twelve you were designing for — and everyone squinting at your chart in sunlight.
Try it yourself
The contrast checker measures your text pairs against AA and AAA, and the palette generator builds sets you can then run through the greyscale and simulation passes described here.