On this page
Who you're designing for
Color vision deficiency (CVD) affects roughly 8% of men and 0.5% of women of Northern European ancestry — overwhelmingly the red–green forms, because the genes for the long- and medium-wavelength cone pigments sit on the X chromosome. Scale that to any real product and the conclusion is blunt: if a thousand people use your interface, dozens of them cannot reliably tell your "success green" from your "error red." They aren't seeing grayscale — total color blindness is extremely rare — they're seeing a world where specific pairs of colors collapse together, along predictable lines.
Which pairs collapse depends on the type. Protanopia and deuteranopia (missing red or green cones) merge reds, greens, oranges, and browns; tritanopia (missing blue cones, much rarer) merges blues with greens and yellows with violets. Our color blindness simulator shows all eight types for any color, image, or pair — everything in this playbook can be verified there rather than taken on faith.
The one rule that does most of the work
Never let color be the only difference between two states. This isn't just best practice — it's WCAG success criterion 1.4.1, covered in depth in our Use of Color guide. Every other technique in this playbook is a way of satisfying it:
- Icons. A check mark and a cross distinguish success from error even in pure grayscale. This is the cheapest, highest-value redundancy there is.
- Labels. "3 failing" next to the red dot means the dot no longer carries the message alone.
- Patterns and shape. Dashed vs. solid lines, filled vs. outlined markers, different point shapes in scatter plots.
- Position and grouping. If errors always appear in a dedicated area, location itself communicates.
A brutal but effective self-test: screenshot your UI, convert it to grayscale, and ask whether every state is still unambiguous. Grayscale is stricter than any real CVD type, so passing it means passing everything.
Choosing colors that survive anyway
Redundant cues are the safety net, but you can also pick colors that hold up on their own:
Separate by lightness, not just hue. Lightness differences survive every CVD type — even full achromatopsia. A dark blue vs. a light orange is distinguishable for everyone; a mid-red vs. a mid-green of equal lightness is indistinguishable for millions. When you check a pair in our contrast checker, you're also implicitly checking its CVD resilience, because contrast is a lightness measure.
Prefer the blue–orange axis. Blue is the hue that red–green CVD leaves most intact, which is why "blue for one series, orange for the other" became the default in serious charting libraries. If your status system can use blue/orange instead of green/red for its primary distinction, most of the problem evaporates.
Steal a tested palette. The Okabe–Ito palette — eight colors chosen specifically to remain distinguishable across CVD types (black #000000, orange #E69F00, sky blue #56B4E9, bluish green #009E73, yellow #F0E442, blue #0072B2, vermillion #D55E00, reddish purple #CC79A7) — has been the standard recommendation in scientific visualization for years. You don't have to invent safety from scratch.
Audit whole palettes, not single colors. The failure mode is always a pair, so test pairwise: every palette page on this site runs a color blindness safety report that checks every pair in the palette under the four strongest CVD types and flags anything that drops below a just-noticeable difference.
The workflow, end to end
- Design with your normal palette — nothing about CVD requires drab colors.
- For every place color encodes meaning (states, chart series, map regions, diffs), add a second cue: icon, label, pattern, or position.
- Run the palette's critical pairs through the simulator's comparison table — check protanopia and deuteranopia at minimum, since anything that survives the full dichromat types also survives the milder anomalous ones.
- Screenshot real screens — not swatches — and run the image through the simulator. Thin lines and small icons lose distinguishability long before large fills of the same colors do.
- Re-test after redesigns. CVD safety isn't a property of your palette; it's a property of every place the palette gets used.
What not to do
Don't add a "colorblind mode." Segregated modes are usually worse-maintained, imply the default is allowed to be broken, and miss the users who never discover the toggle. Design the default to work for everyone — with color doing its expressive job and something else carrying the meaning — and the special mode becomes unnecessary. Accessible color design done well is invisible: your interface simply works, for about 8% more people.