Blog — DataDrive

How to Create Colorblind Friendly Dashboards

Written by Megan Lukonen | Mar 31, 2020

I recently sat in on a user acceptance testing (UAT) meeting.  We are in the final stages of UAT and so close to launching a challenging dashboard I’ve been designing.  If you have ever given a live demo, you’ll know that this is the time for a bug to happen.  

Internally, I’m thinking things like “I hope this tool answers their questions. I hope it enlightens them. I hope it works.” Amidst my running freight train of thoughts, one gentleman speaks up on the call. “I’m colorblind, so I am happy you didn’t use red and green together.  For once, I can understand a dashboard. Thank you!

Whoa.  Freight train stopped. 

Guilty confession: I design dashboards with the “Color Blind” color palette in Tableau because this is what I was trained to do, not for any other reason… until now.  Now, I will intentionally keep this gentleman in mind while designing new and redesigning old dashboards.  

Accessibility for Dashboards

“Accessibility” is the degree to which a product, device, service, or environment is available to as many people as possible.  Only 92% of our male population can distinguish the full color spectrum, leaving the remaining 8% lost in a sea of dull or mixed up colors. Roughly 0.5% of our female population finds themselves in the same boat.  There are several types of color blindness, but the most common is where green and red look nearly the same, called deuteranomaly. Relying solely on color for the understanding of your dashboards can exclude several key users.   

After all, if nearly 8% of all men and 0.5% of women are colorblind, would they remind people day in and day out that they can’t read or understand their data? I want to help make you aware and show you some ideas on how to keep your dashboards accessible to the entire population.  

 

Dashboarding for All to See

You have many options to make your dashboards color accessible, here are just a few ideas to get you started:

  1. When building a dashboard, default to using the “Color Blind” color palette available in Tableau.  To the 90% of us that can see the entire spectrum of colors, this palette wouldn’t be our first choice.  To someone who is colorblind, they greatly appreciate this palette as each one of these hues are distinctly different to their eyes. 

A dashboard example using Tableau’s native color palette: Color Blind

  1. What should you do if your company can’t, or doesn’t want to, get away from the red/green color scheme? 

Option 1: Pretend your chart was one color.  Could you identify the difference if everything were black? Apply color only as your secondary visual cue.

Color is only added as a secondary visual to the chart

Option 2: Add other visual cues such as reference lines! They are quick and easy to add without crowding your chart.

Before and after adding a reference line

Option 3: Did you know someone who is colorblind can still tell the difference between a light green and a dark red? This is only an option if you are using 2 colors: one light color, one dark color.  Using this option would be significantly difficult to read with a full gradient, or even using “stoplight” colors (red, yellow, green).

Simulating how light green and dark red look to someone with red/green color blindness

  1. Scatterplots, and even mapping, can be difficult to read when multiple colors are used.  Turning on the legend highlighting option, users can hover/click on a legend item to brighten all associated marks while dimming all other marks.  All users, whether they can identify the entire color spectrum or not, can find benefit to this feature!

 

To Recap

  • Try using the “color blind” color palette over other palettes on your next visual.  It may not be your first choice, but be mindful about everyone that will come into contact with your dashboard(s).  
  • Although it may be easier to say “don’t design with red and green together,” we can still use these colors as a secondary cue to the visualization.   
  • Utilize the legend highlighting feature when you have many marks on a visual.  Everyone will thank you!

We have so many different options at our fingertips to develop and design dashboards for all to see, we just have to be mindful and put these actions into practice.

Let’s Start a Dialogue

DataDrive would love to hear how you design color accessible dashboards! Reach out to us on Twitter @goDataDrive to share what’s worked for you and your teams.

 

 

Explore More