Contact, if you are interested in this website / domain name / Sponsorship / Advertisement / Partnership — web.works/contact
000098The #000098 Color Lab

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

  1. Do not use color as the only signal. Add icons, labels, patterns or text to error, success and status states.
  2. Vary lightness as well as hue, so colors differ even in grayscale.
  3. Label charts directly instead of relying on a color legend.
  4. Use patterns or shapes in maps and charts with many categories.
  5. Underline links in body text.
  6. 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.

Get a free quote

Keep reading