Data Visualizations, Charts, and Graphs

Data visualizations such as charts, diagrams, and infographics are popular as they can present data in a concise and compact way.

But visualizations are often not accessible due to low contrast colors, insufficient labels, or images without alternative text.

This means that part of your audience might be excluded from the information being presented. With some thoughtful planning, we can create charts and graphs that are accessible to everyone. 

Design

When you’re deciding what kind of chart or graph you want to create, it might be tempting to try something different or unique. But when it comes to presenting data, visualizations are most powerful and accessible when the design is familiar rather than a complex novelty.

The important thing is to not overwhelm people with information. If you try to show too much, people might lose the most important pieces. Instead, carefully select only the data that will support your clarity of intent, so that your main message isn’t lost. 

Keep your designs simple and clear, and avoid animations as they can be distracting and disorienting. If you must include some type of movement in the visualization, provide a way for people to turn it off. 

Person looks at pie chart with various colored slices.

Color Choices

Color can be a powerful visual tool in visualizations. When designing a chart or graph, be mindful of the colors you use, the contrast of the text against the background, and how you’re using color to convey meaning. For adjacent data parts, like bars or pie wedges, use a solid border color to separate and add an additional layer of visual distinction between the pieces.

color bars showing range of color options.

Text Contrast

The color of any text should have a contrast ratio of at least 4.5:1 against the background color.

You can measure the color contrast with a tool such as the WebAIM Contrast Checker

Object Contrast

For bars in a bar graph or sections of a pie chart, aim to provide a high degree of contrast against the background and against each element. The contrast ratio for these should be 3:1. For example, if you’re using red and blue to show two bars in a bar graph, the red and blue should have a contrast of at least 3:1. 

Conveying Meaning

If color is the only way that you’re conveying meaning, your information might be lost to someone who can’t see color. Instead of relying on color alone to explain the data, add an additional visual indicator, such as a pattern, shape, or text label so that even if someone is unable to perceive color, they’ll still be able to understand the data. But be careful not to overdo patterns - keep them simple and clear. 

Example 1 - Shape Differences

The colored lines also have shape differences (diamond, square, triangle) to identify them.

2021 Crop Soybean Cash Market Statistics (February 7 – February 11, 2022) - a line graph indicating the daily maximum, minimum, and average prices.

Credit: University of Arkansas Division of Agriculture

Example 2 - Pattern Differences

The columns have different patterns to help distinguish beyond just color.

Bar graph with two data points distinguished by striped and dotted patterns.

Credit: Zach Grosser - Accessible Colors for Data Visualization

Labels and Descriptions

Whether a data visualization is simple or complex, there should be clear text that labels the significant parts of the data. Ensure major elements are identified, such as the chart title, the horizontal and vertical axis and other notable framework elements. Use labels and legends that clearly mark and distinguish the data points.

Also add either brief alternative “alt” text or a longer description that provides context and explains the most important details about the visualization.

Example 3 - Direct Labeling

If possible, use "direct labeling" - position the label directly beside or adjacent to the data point. 
lables for colored lines are placed directly next to each line.

Credit: storytelling with data.

Example 4 - Data Point Callouts

Each data point has the callout for the amount so a user doesn't have to guess or rely on color to identify different slices.

Pie chart of favorite foods with labels next to each slice - tacos 59%, pizza 34%, salad 7%.

Consider Providing a Supplemental Format

Icon of a bar chart and an arrow pointing to a spreadsheet.Another way to make sure your data and message can be understood by your audience is to provide a supplemental format for the data.

People learn in different ways - some might be visual learners while others prefer a more analytical text-based approach. Presenting data in multiple formats will ensure that people can digest the information in the way that best suits their needs.

Example 5 - Include a table or spreadsheet 

Below the bar chart is a link to the data in table form. 

Bar Chart of First and Second Year Student Weekly Activities.

Example 6 - Chart Description

Consider providing a link to a longer description or include it adjacent to the chart in a collapsible section.

Bar Chart of First and Second Year Student Weekly Activities.

See Chart Description

Weekly Activities for 1st and 2nd Year Students measured in hours.

  • Social Events - First Year 6 hours, Second Year 2 hours.
  • Volunteer Activities - First Year 4 hours, Second Year 2 hours.
  • Coursework - First Year 9 hours, Second Year 9 hours.

 

Building your Data Visualization

Before you get started, it’s worth pausing and thinking about the data you want to present and what platform, program, or tool you'll use to build your visualization. We'll share three options below for how you might build and display your data visualization.

Visualization built anywhere, presented as Image with Alt Text

No matter where you create your data visualizations, you will likely have an option to export as an image (such as .jpg or .svg) or to take a screenshot. These image files may then be used anywhere that you’d like to share the data. When sharing as an image, be sure to include alternative text that succinctly describes the visualization.

Advantages

The color and design of the visualization is stable and will not change if imported from one program to another. 

Disadvantages

Best for simple visualizations with limited content. Images may become pixelated. Content owner will have to keep track of the source file for future edits and changes.

Visualizations created and presented in Documents

Icon of document with text.Microsoft, Google, and other common document creation programs offer tools for creating visualizations as part of your standard document editing. Learn more at Microsoft Chart Guidance or Google Chart Guidance.

Advantages

These programs have a low learning curve for users new to designing visualization. You can easily make accessible diagrams and charts.

Disadvantages

If sharing in a different program or slide theme, the colors or text may change, introducing accessibility errors. In some cases your chart may be converted into an image that would then require alt text.

Visualizations created using a Chart Library or Custom Build

Icon of a screen with a gear overlaid.You may choose to design your own visualizations or use a chart library to design and embed visualizations. Whichever you choose, there are a few additional considerations to keep in mind, such as keyboard access, screen reader access, focus indicator, and names and roles. However, some well-designed chart libraries (such as HighCharts) take care of many of these considerations for you. 

Advantages

Allows the greatest flexibility in design. Versatility in embedding the data visualization in a variety of places for display.

Disadvantages

Steeper learning curve. Some tools are not accessible, so use the criteria above to evaluate before building a chart or graph. You might also have to pay for a license to use the tool.