How to Design a Dashboard for Colorblind Users

by | Mar 23, 2015 | General BI

Reading Time: 4 minutes

Designing for colorblindnessYou may not realize it, but some of your users may be colorblind. Colorblindness is fairly common, with 8% of Caucasian men, 5% of Asian men and 4% of African men having either Protanope (red-weak) or Deuteranope (green-weak) colorblindness. (Source: https://jfly.uni-koeln.de/color/) Fewer females are colorblind, but altogether about 1 out of 20 people has some form of colorblindness, making it an issue that is too important to ignore. (Tweet this.) If you do not consider their needs during the dashboard design process, colorblind users will find it awfully difficult to read and interpret color-coded information on your dashboards.

To see how great of a problem colorblindness can be, take a look at Figure 1 (below), which shows what people with Deuteranope (green-weak) colorblindness might see when looking at colors recommended by one dashboard professional.

Deuteranope simulation

Figure 1

When color is used to highlight exceptions in your environment, it’s critical that a user’s attention is immediately drawn to the area. That’s why many dashboards use red and green for exceptions. However, as you can see above, the muted colors that a Deuteranope sees are difficult to distinguish from one another. Although the darker, more saturated colors are easier to differentiate, red and green hues are very difficult to distinguish. This could cause a user to become frustrated with any red-green exception indicators you include on your dashboard.

Tweet: How to design a dashboard for colorblind users

What Can You Do About It?

Being sensitive to the needs of your users is the first step. If at all possible, find out who is colorblind and customize screens for the specific type of colorblindness your user has. You may find that users are unaware of their own limitations but just “don’t like” the colors you have selected. This displeasure with the color range may be related to an inability to distinguish certain colors.

Once you know who is colorblind and what parts of your dashboard need to be adjusted, you can utilize several resources on the Internet to test your color scheme. Once you make color changes, you can apply these changes to your entire dashboard or create a specialized environment for your colorblind users that renders colors they can readily distinguish.

Vischeck has a simple tool that allows you to translate your own images into what a colorblind person might see. Through trial and error, you can check your images with Vischeck and create a color scheme that is easily understood by colorblind users. Vischeck also has a tool to “Daltonize” images to correct them for colorblind viewers.

If you are not interested in going through a trial and error process, you may want to consider following the steps outlined by Color Universal Design (CUD):

3 (+1) Principles

  1. Choose color schemes that can be easily identified by people with all types of color vision, considering both lighting and usage.
  2. Use different colors as well as different shapes, positions, line types and coloring patterns, to ensure that all types of users can understand the information.
  3. Clearly state color names when users are expected to use them in communication.

+1 Aim for visually friendly and beautiful designs.

You may also want to refer to Figure 2 (below) to select and use colors that are easier to identify.

Codes for best colors for colorblindness

Figure 2

Source: https://jfly.uni-koeln.de/color/

Green, Yellow, Red combos

Dashboards often use green, yellow, and red combos, which we’ve indicated could be problematic to colorblind users. Here is one combination of green, yellow and red that could be used for dashboard indicators:

Green = 43 R, 159 G, 120 B
Yellow = 240 R, 229 G, 75 B
Red = 214 R, 100 G, 30 B

This combination would have enough of a variation in color to satisfy the needs of each type of colorblind user noted in Figure 3 (below). The boxes in the left-hand column are the recommended colors. The columns to the right are simulations of how certain vision deficiency types would then “see” the colors.

Simulation of 3 types of colorblindness

Figure 3

Source: https://web.archive.org/web/20171216222059/http://www.vischeck.com/vischeck/

Resources

There are several online resources for developing your own set of colors that are easier for everyone to see. Here are the two we’ve mentioned that we’ve found useful in providing simple checks of the color options rendered in various dashboard implementations.

Read more dashboard design articles

Rose Curtis

You may also like