True Colors: Optimizing Charts for Readers with Color Vision Deficiencies

Hey, would you take a look at this chart and let me know what you think? I am particularly concerned about the sales figures I marked in red.

Chart filtered for red green color blindness. All colors appear murky green and indestinguishable

Don’t adjust your screen. You are viewing this chart through a filter that simulates the most common type of color blindness. We often have the best intentions when we try to draw attention to an element in a chart by marking it red, or by contrast to show that all is well by marking something green…  But trust me, this is the sort of thing that can ruin someone else’s day, and it is so easy to fix.

About Color Blindness

According to the NIH, color blindness or color deficiency affects around 8% of the male population and 0.5% of the female population. This means that, if your document will be viewed by 1000 people, around 45 of them will have some form of color deficiency. If you are sending it across campus, this could easily translate to several hundred people who will be affected.

It is worth noting that color deficiency is a spectrum; people can have mild to severe forms of color blindness, and not all forms of color blindness involve the same colors. The most common type of color blindness involves deficiencies in discerning the colors red and green.

A common misconception among those who are not color blind is that if someone has red/green color blindness, they only have trouble with the colors red and green. However, these deficiencies can easily affect other colors as well; for instance, maroon and brown can look identical to people with red/green color deficiencies… after all, maroon is just brown with a touch of red. In other words, it is not just the colors red and green themselves, but also those colors within other colors. It’s like an inception of color… (I still don’t understand that movie).

Troublesome Charts

Let’s take a look at a couple examples… (Disclaimer: both charts are created with entirely fictional data for purposes of illustration of chart features).

Pie chart using purple and blue to distinguish

At first glance, this chart looks great! I think I am clearly demonstrating that so many students (95%!) are happy on campus. But let’s run this through a red/green color blindness simulator…

Same chart filtered for red green color blindness: all appears purple

Wait. What is going on?? How many students are happy? Who is unhappy? Someone is 95%, but which one?

Let’s look at another.

Schools distinguished by red and green lines

We think we did a good job of drawing attention to Anthopology’s interest numbers by marking them in red…. But here is how the same chart filtered for red/green color blindness:

Same chart filtered for red/green, all lines appear green

Oh man. Maybe we didn’t do such a good job…

What You Can Do

  1. Never Use Color Alone to Convey Meaning

“Wait, are you saying I can’t use color anymore?” Of course you can! But don’t make color the only way someone can discern what is going on.

Think about incorporating labels, tables and textures in your charts (see below for some examples).

  1. Use Color Blindness Simulators to Test Documents

There are several simulators available online to help you do a final check on images or charts in your document. Here are a couple I have been using:

  • Color Oracle: This site has a free download that allows you to filter your entire screen with a couple clicks, and see how different documents would look with different types of color impairment.
  • Coblis: Color blindness simulator: upload an image to this site to see how it would look for different types of color impairments. For charts, you may have to take a screen shot so you will have an image to upload.
  • Windows 10: the settings of Windows 10 also has a color blindness simulator in settings. Go to Settings and search for Color Filter to find it.Windows 10 settings
  1. Utilize Monochromatic Color Sets

If there are only a few variables in a chart, contrast can be helpful. Regardless of a color that is perceived, gradations in color can almost always be detectable to your viewers. Monochromatic palettes consist of the same color with different gradations of lightness or darkness. See below for an example with a pie chart.

  1. Color Blind Friendly Palettes

If you are feeling fancy, there are some tried and true color-blind friendly palettes out there. Just make sure you are still not conveying meaning with color alone, because no palette can address all types of color blindness. Here is a page with some cool options, and interesting general information: Color Friendly Palettes

Exercise File

If you would like a challenge, try fixing some of the Charts in this exercise file. There are two sheets in the workbook with problematic charts and two sheets with possible solutions. That being said, there are many ways you could solve the puzzle of making these charts more accessible.

OfficeBytesColorExercise

Let’s Fix Those Charts!

If I went through all the ins and outs of chart creation, this would be much more than a byte, so please do come to my Pivot Tables, Charts and Pictures training if you get really stumped (or attend anyway, because it is a blast!)

Below is a summary of how I approached fixing the problem charts.

Chart 1

Chart 1 was this guy:

Pie chart using purple and blue to distinguish

I did two things to this chart:

  1. Utilized a monochromatic color set
  2. Added data labels

The result is conveying the same information, but the look is a bit different.

Pie chart now monochomatic yellow with labels

Running this chart through the red/green color blindness simulator (or even converting it to greyscale) it is still understandable.

Pie Chart looks mostly the smae with filter

Below are the steps I took.

Monochromatic Color

  1. Click on the chart to select it.
  2. Press the paintbrush button on the right side of the chart to access Style and Color options.
  3. Select color.
  4. Select a monochromatic color set (I picked yellow).
    Steps 1 through 4 illustrated

Data labels

  1. Click on the chart to select it.
  2. Press the + button on the right side of the chart for Chart Elements.
  3. Check the box next to Data Labels.
    • Don’t forget you can press the arrow to the right of Data Labels to access more options, like the location and appearance of the labels.Data Labels

Chart 2

Chart 2 was the fictional subject interest chart:

Schools distinguished by red and green lines

To fix this chart,  I added two things:

  1. Data labels  (see above)
  2. Data table at the bottom of the chart.

Line Chart now has labels and a table underneath

Though I didn’t change the colors, running this through a red/green color blindness simulator I can tell that people can perceive the difference between the lines with their labels; and as a backup, they could reference the table underneath.

Chart now understandable even though colors are all green

I covered data labels in the previous example.  Below is how you can insert a data table.

Data Tables

  1. Click on the chart to select it.
  2. Press the + button on the right side of the chart for Chart Elements.
  3. Check the box next to Data Table. Don’t forget you can always click on the arrow to the right of any of the chart elements to see more options.

Data Table

Tell Me About Your Experiences

What do you think? Did you approach correcting the charts differently than I did? Are you someone who has a color deficiency? Have you torn out your hair trying to read certain charts, and if so, do you have other suggestions that we, the chart makers, can do to improve? I would love for you to weigh in with your thoughts!

Congratulations, Power Users!

Congratulations to our newest Power Users! For the full gallery, and more information about the WSU Microsoft Office Power User Program, please visit: wichita.edu/poweruser

  • Johny Buchanan-Spachek

Johny Buchanan-Spachek