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.

Facts

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

Consequences

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:

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)

Examples