Color palettes and accessibility features for data visualization
Tags: Accessibility, Data Visualization, Design System, Palette, Color

Additional accessibility cues for the categorical palette

Divider lines

The divider line is actually more important in charts using the categorical palette, because here colors are used to differentiate between categories.

Although we’ve ensured that all the colors are 3:1 accessible against the background, it’s not possible to keep them 3:1 accessible against each other at the same time. So we’ll add a contrast divider in the theme background color to separate any touching colors.

Divider line on donut chart between categories

Tooltips

Hover tooltips are a must-have to communicate more detailed information without over crowding the visualization. Carbon data visualization has two types of tooltips: single data point tooltip, and comparative tooltip for hover on multiple data points.

Single tooltips can be surprisingly complex, displaying up to 4 dimensions of data (name of category, values of both axis, and size dimension on some charts).

Example of single data point tooltip displaying 4 dimensions of data

Comparative tooltips display multiple data points in one tooltip and may also provide a sum when relevant. If the cursor rests at any point between lines on line chart, or above a stacked bar, a tooltip ruler will appear and all y-axis outputs will be displayed for that particular x-axis time stamp.

An example of comparative tooltips on stacked bar chart

Textures and shapes

Texture is a well-established alternative to color coding areas, though it also pose a scalability challenge. When textures are used on bar charts, the bars need to be outlined in a 1px stroke and double the width to ensure the patterns are recognizable.

Texture on bar chart. Note bars double in width when patterns are used

List of 8 texture options with varying density

Shapes can also serve as an alternative or enhancement to color coded data points. The main considerations when designing these are ease of differentiation and consistency of use. Just like semantic colors, certain shapes can have semantic meaning too (e.g. triangles for warning or caution). For this reason, it’s important for teams to align on their use, especially in status alerts.

Another drawbacks is users would have to trace the line to read categories. To avoid this, use shapes in combination with colors.

Two sets of 8 shapes, outlined and filled

The obvious drawback is all users would have to trace the line to read categories. To avoid this, use shapes in combination with colors.

Keyboard navigation

Carbon is still working on implementing keyboard navigation for charts. Future functionality will allow users who are tabbing through a page to focus on individual data points in a given chart by pressing ‘Enter’, and then ‘Tab’ again to exit the chart. This will allow keyboard users to access the hover tooltips inside the graph frame.

“Enter chart” button becomes visible when user tabs to the chart

Data table

Although they sometimes require a little work to understand, data tables are the most accessible way to present data. They also happen to be the most unbiased, in that no design decisions could potentially mislead users (e.g. a poor color decision or not starting the y-axis at 0). “View as data table” should always be an option in the visualization’s overflow menu.