The best charts for color blind viewers

The best charts for colorblind viewers — discover the right color palette for your data visualization.
The three types of cones responsible for color perception.
There are three types of cones: The first type is sensitive to long wavelengths (starting from red, peaking at yellow, and declining at green). The second type is sensitive to middle wavelengths (starting at orange, peaking at green, and declining at blue). The third type is sensitive to short wavelengths (starting at green and peaking at blue).

What colors can color blind people see?

Actually, it depends on what type of cones don’t work. There are three common types: protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind). There can also be an intermediate state, color weakness — when the colors can be distinguished but some of the hue details are lost. There’s also a very rare state when all the cones are not working and the person is completely color blind — it’s called complete achromatopsia. In the next picture, the simulation of what colors can color blind people see is presented.

Colorblindness depends on what type of cones don’t work. The three common types are protanopia, deuteranopia, and trianopia.
There are around 300 million people in the world who are color blind. About 8% of men and 0.5% of women are color blind.

Color blind palette

The picture below shows that for all of the types of color blindness there is a pair of colors that can be distinguished — red and blue — these are color blind safe colors. As for the green, it is the number one among the colors to avoid for the color blind. Most of the issues for colorblind people come from the prevalence of red-and-green combinations as a pair of opposites in design. The first rule of making a palette for colorblind — avoid combining red and green. So if you’re aiming to create a color blind-friendly palette try to use only two basic hues: blue and red (orange and yellow will also fit). The other colors should be made out of these two hues. All the variations can be made by using different saturation or lightness of the basic color. Based on these rules we’ve created a color blind palette and checked it for three color blindness types.

For all of the types of color blindness, there is a pair of colors that can be distinguished — red and blue — these are color blind safe colors.
Helpful internal tool in Adobe Illustrator that can help you to check if your visuals are color blind friendly.

How to make charts color blind friendly?

Use shapes and icons as an addition or alternative to color-coding. In case one needs to use colors that are not perceptible by colorblind users, a chart can be saved by using icons as an addition to color, duplicating its informational function.

Make your charts color blind friendly: use shapes and icons as an addition or alternative to color-coding.
Make your charts color blind friendly: use direct labels instead of a legend.
Make your charts color blind friendly: dashed lines and lines with various stroke thicknesses are a very helpful alternative to coloring for line charts.
Make your charts color blind friendly: add strokes around chart elements to distinguish one element from the other.
Make your charts color blind friendly: try to use a single hue palette or a red-yellow-blue palette if the usage of color is inevitable.
Make your charts color blind friendly: use color for groups, not the individual categories.

Good and bad charts for color blind viewers

Most of the charts can be modified to be colorblind-friendly, the difference is that some of the charts won’t suffer from the lack of color while the others are heavily dependent on color. Our recommendations are based on how easily one or the other chart can work without any color coding.

Comparison charts

✅ Good choice: Dot plot (and Parallel coordinates)

Dot plots (and parallel coordinates) are the best choice when it comes to comparison charts, especially for those with multiple categories at the same time.

❌ Bad choice: Grouped bar/column chart

Grouped bar/column charts are not the best choice when it comes to comparison charts, since they are too much based on the color differences of the bars of the same group.

Correlation charts

✅ Good choice: Bubble chart

Bubble charts are the best choice when it comes to correlation charts, since they can easily be used without color.

❌ Bad choice: Heatmap

Heatmaps are not the best choice when it comes to correlation charts, since they are heavily dependent on color.

Part-to-whole & hierarchical charts

✅ Good choice: Icon array

Icon arrays are the best choice when it comes to part-to-whole & hierarchical charts, since they do not depend on colored areas or sectors.

❌ Bad choice: Treemap

Treemaps are not the best choice when it comes to part-to-whole & hierarchical charts, since they are heavily dependent on color.

Date over time charts

✅ Good choice: Line chart

Line charts are the best choice when it comes to date over time charts, since they can be modified in various ways to make it color blind friendly.

❌ Bad choice: Streamgraph

Streamgraphs are not the best choice when it comes to date over time charts, since they are helpless without color.

Distribution

✅ Good choice: Density and ridgeline plots

Density and ridgeline plots are the best choice when it comes to distributive charts, since opacity and direct labels can substitute the need for coloring.

❌ Bad choice: One-dimensional heatmap

One-dimensional heatmaps are not the best choice when it comes to distributive charts, excepted if you use a one hue palette.

Further reading and resources

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Datylon

Datylon

197 Followers

Supercharge your chart design with fully customizable charts and advanced styling options, online and in Illustrator.