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 specific how-to tips for MS PowerPoint and Google Slides.
To play with these graphs yourself, download the PowerPoint file available in the right sidebar of this article.
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.
- Use differences in brightness, NOT color
- For limited data points, try a monochromatic scheme.
- 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.
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.
Google Slides Tip: How to choose a monochromatic color scheme
Google Slides does not offer pre-set monochromatic schemes. But you can edit the color scheme on your chart this way:
- Select the chart on your slide. A "Linked Chart" menu bar will appear in the upper right of the chart. Select the three dot kebab icon for more options, and then choose "Open source" to open the Google sheet with the chart data in it.
- In the linked Google Sheet, select the chart. Open the three dots kebab menu in the upper right corner of the chart, and select "Edit chart." This will open the Chart Editor sidebar. Under the "Customize" tab, expand the "Series" item. For each series, choose a fill color. For a monochromatic scheme, keep your color choices all within the same column of colors. For example, choose the lightest red, the third lightest red, and the darkest red for three shades within a monochromatic scheme.
- Back in your Slides file, use the Update button to show the edits you just made in the linked chart.
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!
PowerPoint Tip: How to add alternative text
There are two ways to add alternative text to a chart. The first is to simply use a text box on the slide to hold a text caption for the chart. This will be helpful to everyone.
The second way is to use the alt text attribute, which will benefit people using a screen reader, but be hidden from everyone else.
- Select the chart.
- In the menu, choose "Format."
- On the ribbon, select "Alt Text" in the Accessibility panel. This will open a sidebar where you can add a short image description in the box. If you already described the chart in a caption, you can mark the chart decorative here so the same text will not be read out twice to screen readers.
Google Slides Tip: How to add alternative text
There are two ways to add alternative text to a chart. The first is to simply use a text box on the slide to hold a text caption for the chart. This will be helpful to everyone.
The second way is to use the alt text attribute, which will benefit people using a screen reader, but be hidden from everyone else.
- Select the chart.
- Under the "Format" menu option, choose "Format options." This will open a sidebar.
- The last item n the Format options sidebar is Alt Text. Enter your short image description in the box.
Apply the same principles 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.
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
More about Color Blindness
Color blindness, or color vision deficiency affects approximately 350 million people worldwide. It is much more prevalent in men than in women. One in 12 men has color blindness, while 1 in 200 women has it.
There are many types of color vision deficiencies, but the most common type is red-green. People with red-green color blindness have a hard time distinguishing between red and green.
To see how your chart or graph appears to people with different types of color vision deficiencies, you can use one of the following tools:
Need more help?
Check out these resources on accessible charts and graphs:
Contact
Krista Poppe, Digital Presence and Accessibility Compliance Coordinator in ITS, with additional questions.