Dataviz Dilemma: Color Contrast

As science communicators, we want our messages to be accessible to all members of our target audience, regardless of differences in vision, hearing, physical ability, literacy, and other areas. Today, I wanted to share a visual accessibility issue I’m currently (ongoing-ly) grappling with: color contrast in data visualization.

One of the core elements of art and design is color. When the goal of design is to inform (like it is for data visualization), we need to be sure there is enough difference, or contrast, between the various colors we use. Readers need to be able tell the difference between the color of text and the color of the paper/screen it’s shown on. Drivers and pilots need to be able to tell the difference between red lights and green lights. Bathers need to be able to tell the difference between the knobs for hot water (red) and cold water (blue).

If colors are too similar, people have a hard time distinguishing between them. That’s true, in the most extreme sense, for people with color vision impairment.* However, even people with full color vision have difficulty distinguishing between colors when the colors are very similar to each other, like dark blue and very dark blue.** It also takes a lot of effort for anyone to read dark text on a dark background or light text on a light background.

As far as I can tell, there are three color-contrast-related conditions that an ideal data visualization should meet. I’ll illustrate them with this pie chart:

Condition 1: Sufficient contrast between the text and its background. (Can someone easily read all the words?)

Condition 2: Sufficient contrast between the graph and its background. (Can someone tell where the graph starts and ends?)

Condition 3: Sufficient contrast between colors within the graph. (Can someone distinguish between data points?)

Here’s where I’m struggling: It’s really hard to find color palettes that satisfy all three conditions.

The contrast ratios for my text and backgrounds in the original colored graph are great, as shown in the table below. (3:1 is considered the minimum acceptable ratio. The lower the first number, the harder it is to distinguish between the two colors.)***

Color 1	Color 2	Contrast Ratio
Black	White	21 : 1
Green	White	5.37 : 1
Blue	White	4.6 : 1

In other words, in the original graph, there’s enough contrast that most people can read the text (Condition 1)  and can distinguish the graph from its background (Condition 2).

And then we get to the contrast ratio for the green and blue in the graph. It’s 1.16:1…almost as low as you can go. In other words, the original graph fails Condition 3, being able to distinguish between colors in a graph. If we were to print the original graph in grayscale, the two pie wedges would appear to be almost the same shade of dark gray:

And meeting Condition 3 gets even tougher if a graph has more than two colors, or if an institution/client has a branded color palette that limits your color options:

See? If the above graph is printed in black and white, you can’t really tell the difference between the dark shades of North Carolina and Virginia, or the light shades of Kentucky and Pennsylvania. There are also contrast issues with the Kentucky and Pennsylvania colors when paired with white; it’s hard to read those states’ abbreviations and percentages.

I did some experimenting, and I think it’s only possible to satisfy all three color contrast conditions if you use three colors (or fewer), including the background. Here’s my reasoning: If you start with black and move to the first gray with acceptable contrast…then start with that gray and move to the closest lighter gray with acceptable contrast…and so on…you can only do that twice, as shown in the diagram below. (The lightest gray in the diagram doesn’t have enough contrast with white, so white wouldn’t be included as a fourth color.)

Here are some redos of the graph from the beginning of this post, with at least the minimum acceptable contrast between each of three colors:

So, after all this pondering and writing, I’ve come to the conclusion that color in dataviz can only fully accessible (i.e., meet all three conditions above) if you limit yourself to three colors: a very light one, a very dark one, and a Goldilocks in the middle.

What does this mean for access? Can we make a good graph using only three colors? (Yes!) Are graphs with 4+ colors only accessible to tetrachromats? (No!) Read more in next week’s post.

*If you have deuteranopia, aka. red-green color vision impairment, it’s probably best to avoid driving around Syracuse, New York.

**Contrast is often a struggle for me and my full color vision when interpreting heat maps. There’s an interesting case study of that issue here.

***Technical sidebar: Web Content Accessibility Guidelines (WCAG) 2.0 are the standard for color contrast in digital media. I use WebAIM’s contrast checker to check color contrast in my products. My understanding is that there isn’t an analogous, objective way to check for color contrast in print documents, so I also use WebAIM for products that will be printed. Another way to check for color contrast is to print a product in black and white; if two colors are hard to distinguish in black and white, there’s not enough contrast for someone with color vision impairment.