Data visualization maps are a common culprit for color accessibility issues

One of the reasons I got started with accessibility is that I’m colorblind. I have had to advocate for alternatives to information conveyed by color since I was young. It’s something that has caused a large deal of frustration in my life, but it’s also given me a better sense of empathy for those with disabilities that are not easy to accommodate.

Just this morning, I saw the map below in an article from the Washington Post. It details the effects of the polar vortex and which states may experience subzero temperatures in January.

A map is an excellent format to present temperature data to sighted users. It allows us to contextualize the data in a way that something like a table layout can’t match. However, when maps like this one use color as the only means of conveying information, it creates a barrier for colorblind users and prevents them from understanding the data.

With this map in particular, I was unable to discern if my location falls into the “Below 0°F” or “0°F to 10°F” category. It was frustrating, but not a critical matter. However, imagine this map was used to detail active tornado watch regions in the Midwestern U.S. Suddenly the importance of conveying that information clearly becomes a lot more important. Maps like these are prevalent in our data-rich landscape, so it’s important that we get the details right.

This is why the W3C accessibility guidelines specify that, “color must not be the only way of distinguishing information” (SC 1.4.1). Not all users see color in the same way, so using it as the only means communicating information is a usability barrier.

Here are some ways data visualization maps can be improved

• Associate a distinct background pattern for each color displayed on the map (e.g. diagonal lines, dots, triangles). This would be in addition to the background color, so each section would have an associated color/pattern background. See this case study for NYC’s ZoLa map.
• If information is conveyed with color, make sure that each color differs in both hue and lightness. This counts as an additional visual distinction for SC 1.4.1, as long as the difference in relative luminance between the colors has a contrast ratio of 3:1 or greater. WebAIM’s Contrast Checker tool is great for testing contrast ratios.
• Use figure-ground organization when designing maps. This is a broad design principle, but with cartography the intent is to present important information in a way that keeps it from fading into the background of the map.