Designing for Color Blindness: A Practical Checklist
Color blindness affects roughly 8% of men and 0.5% of women - a substantial portion of any audience. Most cases are red-green deficiencies; blue-yellow is rare. The good news: a handful of design rules eliminate 90% of accessibility problems automatically.
The three main types
- Deuteranomaly / deuteranopia (red-green, most common, ~6% of men) - greens and reds blur into similar browns/yellows.
- Protanomaly / protanopia (red-green, ~1% of men) - reds appear darker; pure red can read as black.
- Tritanomaly / tritanopia (blue-yellow, very rare) - blues and greens look similar.
Rule 1: Never use color alone
If you mark errors with red text and success with green text and that is the only difference, color-blind users cannot tell them apart. Always pair color with an icon, label, or pattern.
- Form errors: red border + warning icon + text label.
- Status indicators: color + shape (circle vs square vs triangle).
- Charts: color + pattern (dots, dashes, hatching) + direct labels.
Rule 2: Maximize lightness contrast
Color blindness affects hue perception, not lightness perception. Two colors with very different lightness will always be distinguishable. Two colors with similar lightness will look identical to a deuteranope even if you see them as red and green.
A red and a green at the same WCAG-compliant contrast ratio against white will look completely different to a color-blind user as long as their lightnesses differ. Mix `red-700` and `green-300`, not `red-500` and `green-500`.
Rule 3: Pick palettes designed for accessibility
Several palettes are specifically tuned for color-blind safety:
- Wong palette (Bang Wong, 2011) - 8 colors distinguishable to all forms of color blindness.
- IBM Carbon palette - tested across deuteranopia/protanopia.
- Viridis (matplotlib default) - perceptually uniform AND color-blind safe.
For data visualization specifically, use Viridis or one of its siblings (Magma, Plasma, Inferno) instead of the default rainbow.
Rule 4: Test with simulators
Chrome DevTools (Rendering tab → "Emulate vision deficiencies") simulates all three types. Stark, Polypane, and Sim Daltonism do the same. Run your design through deuteranopia first - if it works there, it almost certainly works for protanopia and tritanopia too.
Try the related tools
Frequently asked questions
How common is color blindness?
About 8% of men and 0.5% of women globally. In a B2B product with a thousand users, ~40 have some form of color vision deficiency.
Are there fonts or icons that help?
Yes - any non-color signal helps. Icons next to status labels, patterns in chart fills, and shape variations in markers all carry meaning that color cannot.
Do dark and light mode affect color blindness differently?
Slightly. High-chroma colors on dark backgrounds can feel more saturated, which sometimes worsens hue confusion. Test both modes.