Designing for color blindness

Which colors are hard to tell apart, how to test your design, and palettes that work for everyone.

Around 8% of men and 0.5% of women have a color vision deficiency. That's roughly 300 million people, and likely some of your customers.

The main types

  • Deuteranomaly and deuteranopia (green-weak or green-blind): the most common. Reds, greens, browns and oranges look similar.
  • Protanomaly and protanopia (red-weak or red-blind): reds look darker and can be confused with greens and browns.
  • Tritanopia (blue-blind): rare. Blues and greens, and yellows and pinks, can be confused.
  • Achromatopsia: very rare, seeing only in shades of grey.

Rules that work

  1. Don't rely on color alone. Pair color with text, icons, patterns or position.
  2. Use lightness differences. Two colors that differ a lot in lightness stay distinct for almost everyone.
  3. Prefer blue and orange over red and green for “good versus bad” or two data series.
  4. Label charts directly instead of using a color legend.

A safe palette to start with

The palette above (blue, orange, sky blue, bluish green and yellow) is based on the widely used Okabe–Ito set, designed to stay distinguishable for the common types of color blindness.

Test it

Upload a screenshot of your design or paste your palette into our Color Blindness Simulator to see it through each type of color vision.

Simulate color blindnessOpen tool

More guides

← Back to Colrify