Designing for color blindness: practical rules
By the 000098 editorial team · Updated · 6 min read
Around 1 in 12 men and 1 in 200 women of Northern European ancestry have some form of color vision deficiency (CVD). On a site with thousands of visitors, that is a meaningful share of your audience.
The main types
- Deuteranomaly and deuteranopia (green cone weak or missing): the most common, making reds and greens hard to separate.
- Protanomaly and protanopia (red cone affected): reds also look darker.
- Tritanomaly and tritanopia (blue cone affected): rare; blues and greens, and yellows and pinks, get confused.
- Achromatopsia: very rare complete color blindness.
Risky pairs
Red/green, green/brown, blue/purple, light green/yellow and green/gray at similar lightness. Deep blue paired with yellow or orange, such as #000098 with gold, remains distinguishable for the common red–green types, which is why blue/orange palettes are popular for charts.
Rules that work
- Do not use color as the only signal. Add icons, labels, patterns or text to error, success and status states.
- Vary lightness as well as hue, so colors differ even in grayscale.
- Label charts directly instead of relying on a color legend.
- Use patterns or shapes in maps and charts with many categories.
- Underline links in body text.
- Test with the color blindness simulator before shipping.
Safer chart palettes
A blue–orange axis, plus lightness steps, covers most needs. For many categories, research palettes designed for CVD (such as the Okabe–Ito set) are a reliable starting point.
About simulations
Simulators, including ours, use published models (Machado et al., 2009) to approximate how colors appear. They are a good screening tool, but nothing replaces feedback from real users with CVD.
Want this applied to your brand?
Get an accessible palette, tokens and a style guide built for you.
Keep reading
Hex color codes explained: how #000098 and every other code works
A plain-English guide to hexadecimal color codes: what the six digits mean, how to read them, shorthand, alpha and how to convert to RGB.
Color theory basics for designers and marketers
The color wheel, harmonies, value and saturation, and the 60-30-10 rule, explained with practical examples you can apply today.
WCAG color contrast: a practical guide to accessible colors
What contrast ratios mean, the AA and AAA thresholds in WCAG 2.2, how they are calculated and how to fix colors that fail.
Color psychology in marketing: what the evidence actually says
How color influences recognition, attention and perception in branding and conversion, which claims are myths, and how to test colors properly.