Visualizing for the Color Blind

Color blindness is a color vision deficiency which affects roughly 8% of the North American male population and 0.5% of the female population. So when designing data visualizations and dashboards, it’s important to keep this group of people in mind to make sure they are seeing the same results as everyone else.

Understanding-color-blindness-infographic

You have three different types of cones in your retina: red, green and blue. Most people affected with color blindness are missing one or more of these cones or have them malfunctioning, which means that they may not be able to distinguish between certain pairs of colors in the same way someone with all three functioning cones can. Color blindness comes in three types:

• Protanopia/protanomaly (missing or malfunctioning red photoreceptors)
• The inability to perceive red or a reduced sensitivity to it, making purple seem blue
• Deuteranopia/deuteranomaly (missing or malfunctioning green photoreceptors)
• The inability to perceive green or a reduced sensitivity to it, making green seem brown
• Tritanopia/tritanomaly (missing or malfunctioning blue photoreceptors)
• The inability to perceive blue or a reduced sensitivity to it, making yellow seem red

Red and green color blindness (deuteranomaly & protanomaly) are by far the most common and are usually grouped together because people with these deficiencies see color in a very similar way. Blue-yellow color blindness (tritanomaly) is extremely rare, affecting less than 0.01% of all color blind people.

When designing dashboards, one of the most important factors for communicating information is color. Color has four characteristics:

• Hue: the color itself
• Lightness: how light or dark the color is
• Saturation: the amount of hue applied to an area, ranging from pale to saturation
• Intensity: how both lightness and saturation are manipulated

In relation to how a color blind user may see the characteristics of color, it’s important to keep in mind what you can do to make your visualizations more accessible to the color blind.

• Hue: Color blindness is essentially an inability to distinguish between different hues of equal intensity. A red-green color blind person may have issues distinguishing red, green, brown, orange and yellow, and will generally confuse blue and purple hues. Blue-yellow color blind people have trouble distinguishing between violet and red, seeing both in a duller hue; blue and green, which will appear as red or blue; and blue and yellow.
• Intensity: since a color blind person can easily distinguish between different intensities, color blind people struggle most when there is no intensity variation in what they are looking at.
• Proximity: the color blind are affected the most when similar colors are grouped closely together. A red-green color blind person would unable to distinguish reds and greens on a chart if they were placed close to each other.
• Size: When the size of color-coded objects is small, only a few cone cells can be used for recognition. Colorblind people find it especially difficult to distinguish the colors of thin lines and small symbols. The larger the solid-colored object is, the easier it is for a color blind person to determine its color. The smaller you make an object, the more difficult it is to tell its specific hue.

Design Recommendations

1. Play It Safe: Avoid situations where several color blindness factors come into play. For example, when designing a scatter plot with different color dots, make sure the dots are either large, spaced out, or have a wide range of intensities (light green, dark red). The use of symbols to supplement your color-schemes can also be useful for the color blind.

normal-vision-colorblind-vision

2. Know What Works: Avoid choropleth maps (which show areas shaded in proportion to the measurement being made) with similar-intensity colors. When this is unavoidable (e.g. when dealing with many different colors of similar intensity), use patterned backgrounds or labels to help color blind users distinguish between colors.

choropleth-map-new-york

3. Interactive Highlighting: When using color to indicate a category (e.g. coloring series on a chart), allow users to hover the mouse over the series legend to highlight that series (by increasing the intensity of that series and decreasing the intensity of the others).

interactive-highlighting

4. Know the Combos: Avoid using gradient colors to indicate data values, in particular green-red gradients, green-yellow, blue-purple, blue-red, green-light blue, green-brown, pink-white, red-orange, red-brown, or brown-black.

[img id=5164 class="size-full wp-image-5164"] Bad[img id=5165 class="size-full wp-image-5165"] Good

By understanding how color blindness works, as well as following a few simple design guidelines, you should be able to create effective data visualizations that appeal to everyone. More than 8% of your users will thank you!

i-secretly-loathe-the-color-blind

About the Author

Written by:

Slava is the Content Marketing Specialist at Dundas Data Visualization, Inc. He is responsible for generating content for multiple communication channels including marketing collateral, website, social media, PR and Media placements.

Comments (2)

  1. Submitted by Kevin Taylor

    “The use of symbols to supplement your color-schemes can also be useful for the color blind.”

    I’d add to this that too often I see people use symbols like red square, yellow triangle, green circle. If you have someone that struggles with red/green, the symbols do nothing (without a legend) as they aren’t universally recognized as good/bad/indifferent. I suggest using symbols like smile(good), frown(bad)…You could use a flat face for middle of the road but why bother highlighting the norm anyway, just highlight what needs attention.

    The fight to move people from red-green to an orange-blue scale has been an uphill battle.

    Reply
    1. Submitted by Troy Marchand

      Kevin, you make a really good point regarding the use of unique symbols to augment the color. And where appropriate I would consider this a best practice.
      In cases where a unique symbol or shape cannot be used appropriately, the use of hatching within the colored area can also help people with color blindness tell items apart.

      Reply

Add new Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>