Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. On a product with any meaningful number of users, that is not an edge case — it is a segment larger than most of the browsers you test in.
This tool re-renders a colour or palette as it would appear under the common forms of CVD, so you can see which distinctions survive and which collapse.
The types
Deuteranomaly and deuteranopia — reduced or absent green sensitivity. The most common form by a wide margin, affecting roughly 5% of men. Reds and greens converge toward yellow and brown.
Protanomaly and protanopia — reduced or absent red sensitivity. Similar confusions to deuteranopia, but reds also appear noticeably darker, which affects contrast as well as hue.
Tritanomaly and tritanopia — reduced or absent blue sensitivity. Rare. Blues and greens become hard to separate, as do yellows and pinks.
Achromatopsia — no colour perception at all. Very rare, but simulating it is the fastest way to check whether your design survives on luminance alone, which is a useful proxy for greyscale printing and poor screens too.
The pairs that fail
Red and green is the notorious one, but it is not alone. In practice the combinations that most often collapse are red/green, green/brown, blue/purple, light green/yellow, and blue/grey. The single most common real-world failure is a red-and-green status indicator — error and success rendered as two colours that a deuteranopic user sees as near-identical muddy tones.
The rule that actually matters
Never let colour be the only carrier of meaning. This is WCAG success criterion 1.4.1, and it resolves most CVD problems on its own. Pair every colour signal with something else:
- Status: an icon or word alongside the colour. A red cross and a green tick are distinguished by shape, not just hue.
- Charts: direct labels on the series, or distinct line styles and markers, rather than a legend that maps colours to names.
- Links: keep the underline, or another non-colour cue. “Blue text means clickable” is invisible to some readers and ambiguous to many more.
- Form errors: an icon and a message, not just a red border.
Where people go wrong
Relying on hue difference for distinctness. Two hues far apart on the wheel can be indistinguishable under deuteranopia. Vary lightness as well as hue and most of the problem disappears — a light green against a dark red stays distinguishable because the luminance gap survives when the hue difference does not.
Assuming contrast checking covers it. It does not. The contrast checker measures luminance difference and will happily pass a red/green pair that is unusable. The two tools answer different questions and you need both.
Testing only the extreme forms. Anomalous trichromacy — the partial forms — is far more common than the complete ones. A palette that works under full deuteranopia is safe, but checking the milder simulations tells you more about what most affected users actually see.
Using more categorical colours than necessary. Beyond about five or six categories, no palette stays reliably distinguishable for everyone. Group, filter, or label directly instead.
Treating “colour-blind-friendly” as a palette you can download. It helps, but the real work is structural: redundant encoding, sufficient luminance separation, and direct labelling.
Checking your work
Run your key screens through the simulator, then check them in greyscale. If a screenshot still communicates everything it needs to with no colour at all, it will work for essentially everyone. Our guide on designing for colour blindness covers palette construction in more depth.