Color Blindness and Design

Some individuals have a perception of colors different from what most people see. This decreased ability is called color blindness or color vision deficiency.
When you design a slideshow/poster for a presentation, a figure in an article, a flyer ... it's important to keep that in mind and try to make your design accessible to everybody.

By exemple, here is a graph with a "not so great" color choice. use the slider the to a simulation of what it "may" look like if you were colorblind.


Roughly 8% of men and 0.5% of women are Color Blinds. It's a lot right?
You would not want your design to be un-friendly to that many people?

The main cause of color blindness is genetic and so far there is no treatment.

A little bit of Biology and Physics

The human retina contains photoreceptors: the rod cells, responsible for low-light vision and 3 categories of cone cells, sensitive for the long- (red), medium- (green) and short-wavelengths (blue) of the visible light.
In case of color blindness these cones may be deficient or absent.

  Deficient Absent
L-Cone (Red) Protanomaly Protanopia
M-Cone (Green) Deuteranomaly Deuteranopia
S-Cone (Blue) Tritanomaly Tritanopia
2 or 3 Cones   Monochromacy


Deutan: Unable to distinguish between colors in the green-yellow-red section of the spectrum.

Protan: Also unable to distinguish between colors in the green-yellow-red section of the spectrum. And the brightness of red, orange, and yellow are much reduced compared to normal. Reds may be confused with black or dark gray.

Tritan: Blue-indigo-violet are seen greenish and drastically dimmed, down to black.

Monochomats: Totally unable to see colors.

By example red-green color blinds (Deutan and Protan) can't tell if a banana is ripe or see a red-berry in a tree.
Regarding design, it might be difficult for them to name a color, to associate the color in a caption to the one in the figure, to distinguish to or more colors from each other, or it might be impossible to simply read Red text over a dark background.

Here is a simulation of what a rainbow of color looks like for colorblinds:

Normal Vision

Deutan Vision

Protan Vision

Tritan Vision

What can you do?

A good design increases accessibility for colorblind. Here are some suggestions to be color-blind-friendly.

  • Use high contrast: text and background must have significantly different lightness
  • Use colors and symbols: anyway chances are your graph will be printed in B&W
  • Add textures and patterns: it's not always pretty, but it's efficient
  • Use a color palette designed for colorblind
  • Avoid more than 7 different colors
  • Avoid using red text over a dark background
  • Avoid using a color gradient that goes from red to green, light green to yellow, green to gray, blue to purple
  • Instead use a single color gradient from light green to dark green
  • In Adobe Photoshop and Illustrator you can check what your design would look like for colorblinds: View > Proof Setup > Color Blindness (then select one of the 2 types available)


7-color palette adapted for color blinds
Color Color Name R G B
Black 0 0 0
Orange 230 159 0
Sky Blue 86 180 233
Bluish Green 0 158 115
Yellow 240 228 66
Blue 0 114 178
Vermillon 213 94 0
Reddish Purple 204 121 167














Dr Sarah Lambart
Geology and Geophysics, Frederick Albert Sutton Building
115 S 1460 E, Room 409
Salt Lake City, UT 84112-0102