Stripe’s dashboards use graphs to visualize data. While the color palettes we use are certainly passable, the team is always trying to improve them. A colleague was working on creating updated color palettes, and we discussed the challenges he was working through. The problem boiled down to this: how do I pick nice-looking colors that cover a broad set of use cases for categorical data while meeting accessibility goals?
The domain of this problem is categorical data — data that can be compared by grouping it into two or more sets. In Stripe’s case, we’re often comparing payments from different sources, comparing the volume of payments between multiple time periods, or breaking down revenue by product.
The criteria for success are threefold:
The colors should look nice. In my case, they need to be similar to Stripe’s brand colors.
The colors should cover a broad set of use cases. In short, I need lots of colors in case I have lots of categories.
The colors should meet accessibility goals. WCAG 2.2 dictates that non-text elements like chart bars or lines should have a color contrast ratio of at least 3:1 with adjacent colors.
The incorporation of intuitive color maps in data visualizations is an extremely useful tool, but has one major drawback: the information conveyed by the colors is lost to those who cannot distinguish between them. According to the Colour Blind Awareness Organisation (UK-based), approximately 8% of men and 0.5% of women worldwide have some form of color vision deficiency (CVD). Fortunately, certain scientifically derived color maps have been created which are able to maintain distinguishability across various different types of color blindness. Several such color maps are shown below with their corresponding CVD-adjusted perceptions.
But when looking at data visualizations, I noticed that the decision of which color scale to use is often not as obvious as many of these data vis books make us believe. Some data visualizations are using sequential color palettes, although they’re visualizing categories. Or the same data is visualized with a diverging color scale in one publication and with a sequential one in the next. And sometimes with classed and other times with unclassed gradients.
What are the rules, the challenges, and the trade-offs?
Let’s find out.
The next three parts of this series provide you with a “decision tree” – a Choose Your Own Adventure of data vis – by asking three questions:
Part 2: When should you use a qualitative and when a quantitative color scale?
Part 3: If you decided to use a quantitative color scale – when should you use a sequential and when a diverging one?
Part 4: If you decided to use a quantitative color scale – when should you use a classed and when an unclassed one?
To create more impactful explanatory visuals, develop the habit of using color in a purposeful way. When applied thoughtfully, color is arguably the most important decision you make when focusing your audience’s attention where you want it.
One way to start is by overriding the default color palette of your data viz tool and start with nothing emphasized.
Where possible, use colors that are bold and clear enough for people to see both text and graphical elements, like lines and points. The Web Content Accessibility Guidelines (WCAG) suggest meeting the WCAG AA requirements – something that is required by law for public bodies in several countries.
To check if your color (and font size) choices are AA accessible you can use a contrast checker website. Here you can check if there is enough contrast between the foreground and background colour for someone with a certain level of impaired vision to be able to see your data or text.
Recently, I came to the realization that 0 of my 58 published data visualizations on my Tableau Public profile provide equal access of their data and storylines for all users, mostly excluding those with disabilities. I have read and studied a lot about developing visuals with care for color blindness, but not so much for blindness itself, or low vision, or users who cannot use a mouse, or many other disabled users. A recent Twitter thread by our colleague Frank Elavsky hits on this topic. It is through these realizations that I decided to join and contribute to the dataviza11y group. A quick plug that we have a great group of people, looking to do some exciting things in this space, so do check out and follow that group and it’s member’s activities if you are interested. A wonderful and recent example is the talk Frank, Sarah Fossheim and Larene Le Gassick presented at Outlier.