Making Charts and Graphs Accessible

When creating charts and graphs, we must consider how we present information so that all people can access it, including color blind, low vision, and blind users.  This article will cover best practices for coloring, labeling, and alternative formats. These best practices can be applied across platforms, but this article gives how-to tips based in MS PowerPoint.

Coloring

First, ask yourself what your graph would look like in gray scale. Two different colors of similar brightness/saturation can look the same when viewed in black and white. We must employ strategies to make sure color blind users can understand the information too.

1. Use differences in brightness, NOT color
2. For limited data points, try a monochromatic scheme.
3. For more data points, use patterns.

View in Black and White

Here is the same column graph viewed in color on the left and black and white on the right. Two of the three colors are impossible to distinguish in black and white.

PowerPoint Tip: How to view in Black and White

Choose the “View” menu item. On the ribbon in the Color/Grayscale section, choose "Black and White."

Try a monochromatic color scheme

If your chart has only 2-3 data points per series, a monochromatic color scheme can work. When you view in Black and White, the difference in brightness carries over.

Pattern fill your series

If your chart has 3 or more data points per series, try incorporating pattern instead. The pattern fill makes the bars accessible even in black and white.

Use data labels for easier understanding

Adding direct data labels to your chart will make it easier for everyone to understand, and it makes color not as important. See two examples below.

Alternate Formats

For blind users, colors, patterns, and labels don't really matter. Instead, you can provide an alternate format.

Every chart should be described in words, either in a caption, the body text of your document, or in the alt text attribute. Using the caption or body text for this will provide every user with a summary of the important information in the graph. Using the alt text attribute will only be available for screen reader users.

In addition to the text description, a data table can be a helpful alternate format for everyone - whether they use a screen reader or not. Always make sure your table has a header row and/or column.

Bringing everything together, see below for our accessible chart with pattern fill and data labels, plus the alternate formats of a data table and a text description in the caption. This is now accessible for everyone!

Apply the same principals to line and pie graphs

The importance of color choice, data labels, and alternate formats holds true for other types of graphs. Please see the examples below.

Line graph

Inaccessible line graph

The colors of the three solid lines will look too similar in black and white.

Accessible line graph

The same graph now has different colors, dotted, dashed, and solid lines, and data labels. With a text description, this graph will be fully accessible!

Both images by Penn State.

PowerPoint Tip: How to change line patterns

1. Select one of the lines
2. Right click
3. On the pop-up choose “Format Data Point.” This brings up the Format Data Point sidebar.
4. On the Fill & Line tab (paint can icon), use the “Dash Type” picker.
5. Repeat for each line in the graph.

Pie Chart

Pie charts can also be made accessible with color choices, data labels, and alternate formats.

In the example below, the left pie chart has a color-coded legend for the categories, but the colors are too similar in brightness and will be difficult to distinguish in black and white. Additionally there are direct percentage labels on each pie slice, but the black text is difficult to read against the dark pie colors.

The right pie chart is more accessible, with both the category and the percentage labels appearing directly in their corresponding pie slice. The white text used for these labels is much easier to see against the dark colors. This chart only needs a text description or data table to be fully accessible.

Image courtesy Accessible Syllabus CC BY-SA 4.0

Need more help?