Visually Accessible Data Visualization
How we designed data visualization to be more visually accessible at Plaid using patterns, shapes, and high contrast colors
The work mentioned in this article was designed by Derek Torsani and Ryan Smith.
Data visualization is commonly one of the most difficult elements of a user interface to make visually accessible — specifically in regards to color contrast as lines are often overlapping, information is dense, and there can be many complex interactions packed within one visualization. Luckily, we have tools like Stark to help us test color contrast ratios as well as simulate different types of color blindness, making this type of work much easier. However, within charts and graphs which use larger amounts of data, it can be challenging, or near impossible, to create an accessible color set. Each color must have not only enough contrast from the background, but also enough contrast between the other colors for someone with color blindness to distinguish between the differences.
What to expect
In this article, we’re going to talk about how the platform design systems team at Plaid designed a high contrast mode for different types of data visualizations to ensure accessibility for people who have color blindness. While we addressed other ways of making data visualization more accessible for people relying solely on a keyboard and screen readers, we won’t focus on that in this article.
High contrast line charts
To set context, let’s look at an example of our default view for data visualization, specifically in a line chart.
This line chart shows six data points portraying differently changing values across twelve months. It uses a tactic to assist in understanding which line on the chart corresponds to which label in the key — differently shaped nodes. The shapes used in a chart like this are strategically placed in an order within the legend to help distinguish the data points apart depending on how many points are being portrayed.
Nodes are optional, and don’t have to be used. Although, when used they provide additional accessibility benefits for people with either visual or cognitive accessibility needs. If being used, and only one data point is being used, we recommend using the circle. When a second data point is introduced, we then use the triangle. These shapes are most different within the set of shapes we are using, with the circle having zero sides and the triangle having three, contrasting the most soft shape (circle) with the sharpest shape (triangle). The next shape to be introduced is the square, with another different number of sides (four). Once we move into a larger data set, we then introduce a hexagon. Though visually similar to the circle, it is technically a new shape with a new amount of sides (six). Fifth and sixth, we include another triangle, rotated 180 degrees, and another square, rotated 45 degrees, in order to differentiate them enough from the previously used shapes.
Without the nodes, though colorful, the palette does not have enough contrast between each individual color for people with color blindness to differentiate the set of lines. Below we can see how the different combinations of colors contrast against one another and fail the necessary contrast ratio of 3:1 for non-textual elements like blocks of color in data visualization. What this tells us is that we need a way to tell the difference between the colors themselves when used together — the shapes.
Although the nodes are helpful to distinguish between the different colors, because a line chart shows a line connecting nodes where data points are, it’s difficult to include an additional outline like in a bar chart (referenced later). This means for some users, lighter colors like yellow and red (in this specific palette) do not have enough contrast from the background to even be seen as lines, with or without nodes. Therefore, nodes must be used in conjunction with higher contrast line segments.
The combination of nodes as varying shapes — alternating in black and white — and using only black lines helps this line chart to be visually and cognitively accessible and inclusive. Additionally, certain interactions, such as toggling through each data point within the legend, can be utilized to help focus on only one line at a time, removing other data points temporarily for easier and clearer understanding.
Low contrast bar charts
Another example is this vertical bar chart — showing five data points, stacked directly next to one another, with a key to which label corresponds to which data point in the set for each day of the week.
The data set utilizes a monochromatic palette to avoid conflicting adjacent colors, with blue serving as the primary color, each point sequentially altering its brightness. Some people are able to see the subtle changes between some of the color values, and so this mode may be preferred by those people, and can therefore be set as the default view. However, for people with varying color blindnesses, some of these values are too close in brightness to the other to distinguish them from the next. To help with this separation between individual bars as well as from the background, we include a black outline to set each shape apart.
We can acknowledge that each data point is in the same order in both the visualization as well as the key, and correlation could therefore be made in that way. However, that similarity in order must be assumed and requires more cognitive load which then impacts people with other accessibility needs.
Also, we as designers have a responsibility to design beyond accessibility compliance and more toward inclusivity, easing our audiences’ understanding of what we are communicating.
Developing a pattern library
The bar chart is different from the line in that it contains a background area for each data point which can be changed to help improve contrast between each point. Simply changing the palette from monochromatic to something more colorful, like in the line chart above in figure 1 (with the addition of shapes as nodes) however, will not suffice as introducing enough distinction between the data points for people with color blindness.
With this background comes the opportunity to fill it with something that uniquely distinguishes each data point from the next. This is where a pattern library comes in. Using seamlessly looping patterns, we are able to create a visually accessible bar chart.
We created a set of patterns, created initially as square tiles, then exported the tiles as images, then used the images as background fills in order to create the seamless patterns. Some patterns use lines and others shapes like circles, squares, and triangles. These patterns can be reordered to create different combinations and sets which make the most sense for each use case.
As appealing as the patterns are, and as much as they help make larger data sets more visually accessible, when we reference the bar chart in a high contrast mode, the most simple approach is to first use black and white fills (as shown below in a bar chart comparing two data points).
As we introduce more than a binary set of data points, we introduce patterns, alternating between the black and white bars.
When two or more patterns are being used, we use patterns which compliment one another in weight, but contrast one another in style, to further help differentiate between the background fills. We stagger the black and white fills with the patterned fills to allow users to more easily break each data point apart.
In our bar chart with five data points, we use a diagonal line pattern, then black fill, then a dots pattern, white fill, and finally straight cross lines. This allows for a combination that is high contrast not only in color but also style, making for a highly visually accessible data visualization.
Takeaways
- Designing a high contrast mode can help people with color blindness be able to clearly understand data visualization at a glance.
- Defaulting to high contrast mode allows people who need to use this mode to see the visualization altogether, be able to see it from the start, and enables all people who are not using a screen reader to see the chart without changing any settings. From there, people who prefer a more colorful visualization can make that change.
- Building inclusive practices over stopping at accessibility compliance opens the door for even more people to use our products.
