Designing for Color Blindness

A color blindness simulator shows how your colors look to people who see color differently, so you can catch combinations that blur into one tone. Open the color blindness simulator, set a foreground and a background, and compare the panels for normal vision next to each type of color vision deficiency.

The main types of color vision deficiency

Most color blindness reduces sensitivity to one part of the spectrum rather than removing color entirely:

• Protanopia lowers sensitivity to red light.
• Deuteranopia lowers sensitivity to green light.
• Tritanopia lowers sensitivity to blue light.

There is also full color blindness, where everything reads as shades of grey. The simulator includes that as a final check.

What to look for when you test

The risk is two colors that look clearly different to you but collapse into the same tone for someone else. Red text on a green background is a classic example, since red-weak and green-weak vision flatten that pair.

Run your important pairs through the simulator and watch for any panel where the two colors stop being distinct. Pay special attention to status colors, chart series and anything that signals meaning through hue alone.

Simple ways to stay readable

You do not have to avoid color. You just need a backup signal so meaning never rests on hue by itself:

• Add a label, icon or pattern next to color-coded items.
• Keep enough lightness contrast between colors that sit together, which the contrast checker can confirm.
• Choose palette members that differ in brightness, not only in hue, which the color harmony generator makes easier to plan.

Testing takes a minute and saves your readers a lot of confusion. The simulator runs entirely in your browser, so the colors you check are never sent anywhere.