Best Practices for Creating Accessible Charts

"Charts, graphs, and maps use visuals to convey complex images to users. But since they are images, these media provide serious accessibility issues to colorblind users and users of screen readers."

Penn State Accessibility Guidelines

Creating accessible charts and graphs is essential for ensuring that all users, including those with visual impairments and/or color blindness, can effectively interpret and understand the data being presented. Good design practices can significantly enhance the readability and usability of visual data representations. Below are five best practices and key principles to consider when designing accessible charts and graphs.

1. Clear Delineation Through Color Contrast
2. Clear and Contrasting Borders
3. Distinct Patterns for differentiation
4. Text Labels and Annotations
5. Color Application

One of the most crucial aspects of accessibility in charts and graphs is ensuring that there is a clear delineation between colors. Many individuals experience varying degrees of color vision deficiency, which can make it challenging to distinguish between similar hues. To address this issue, strive for a contrast ratio of at least 3:1 between adjacent colors. This means that the colors you choose for your chart should be distinct enough to allow for easy differentiation.

For instance, when selecting a colors, avoid pairs that are too similar, such as light blue and light green, as they may blend together for some viewers. Instead, opt for high contrast combinations such as dark blue and bright orange.

Tools like the WebAIM color contrast checker can help you evaluate the contrast ratios of your chosen colors, ensuring they meet accessibility standards. Additionally, in Figma there is a 'Color blind' simulation plugin that allows you to preview your chart's appearance through various types of color vision deficiencies. This enables you to identify and address potential accessibility issues early in the design process.

---

Adjacent colors in graphical content should have a contrast ratio of at least 3:1 to enhance visual distinction. If achieving this contrast directly between colors is not feasible, a border with a contrast ratio of at least 3:1 against both adjoining colors should be used. For example, in pie charts, if adjacent segments have similar hues, adding a clearly visible border can help differentiate them.

Similarly, in maps, boundaries with sufficient contrast can improve clarity. To ensure compliance, designers should use color contrast tools to verify that all color pairings or separating borders meet the required contrast threshold. These practices align with WCAG 1.4.11, which focuses on non-text contrast, improving the overall accessibility of graphical content.

---

Incorporating distinct patterns, such as stripes, dots, or crosshatching, can significantly enhance the accessibility of your charts. For example, in a pie chart, each slice can be filled with a unique pattern in addition to its color. This approach allows viewers to differentiate between segments without relying solely on color perception.

Similarly, in a line chart, using different line styles (solid, dashed, or dotted lines)—and/or different shapes for data points (squares, circles, triangles or diamonds) can effectively distinguish between multiple data series, ensuring that all users can accurately interpret the information presented.

Using patterns is especially beneficial in bar charts and stacked bar charts, where color alone may not be sufficient to convey the differences between segments. However, ensure that patterns are not too fine or intricate, as they should remain easily discernible at various sizes.

See pattern.css site for examples on how to implement this strategy.

---

Clear text labels and annotations are essential for accessible charts, reinforcing visual information and ensuring understanding for users with color perception difficulties. Labels should be directly on or near data points with legible font sizes and sufficient contrast (4.5:1).

Additionally, providing effective alternative text for screen readers is crucial. While short alt text summarizes simple charts, complex visualizations require longer, more detailed descriptions, which can be provided through descriptive titles or accompanying text, ensuring all users grasp the chart's meaning.

---

There are a couple of ways to approach applying color to charts.

A. Same things are the same color

When designing multiple visualizations, it is essential to apply colors consistently across different charts. This practice not only aids comprehension but also helps users quickly associate colors with specific categories or data points. For example, if you use blue to represent sales data in one chart, continue using blue for sales data in all subsequent charts. This consistency reduces cognitive load, allowing your audience to focus on the data rather than trying to remember what each color represents.

B. Maximizing contrast between items that are next to each other

Furthermore, always start with the same colors and apply them in the same order for similar categories across different visualizations. This approach reinforces recognition and understanding, making it easier for users to interpret the data quickly.

---

Testing your charts and graphs for accessibility is essential. Use tools to simulate how visualizations appear to individuals with different disabilities, and test with screen readers to ensure all data is conveyed effectively. Screen readers help users with blindness or low vision access information through text descriptions and labels, making their inclusion crucial for accessibility. Identifying and addressing issues early allows for the time and resources necessary for adjustments.

While automated accessibility checks are a useful starting point, truly effective testing of accessible charts necessitates direct involvement of users with disabilities. Their real-world experiences with assistive technologies like screen readers and keyboard navigation provide crucial feedback that can uncover usability barriers often missed by technical evaluations. Engaging with diverse users, including those with cognitive disabilities, through usability testing sessions offers invaluable insights into the clarity and navigability of charts, leading to meaningful improvements and ensuring genuinely inclusive data visualization.