Chart accessibility

Charts rely on visual elements to make complex data easier to understand, so it’s essential they are accessible to everyone. Ground your chart design and implementation in the WCAG POUR principles:

• Perceivable: Text equivalents (caption, summary), accessible data table, sufficient contrast, labels/patterns/markers instead of color alone.
• Operable: Full keyboard access, predictable focus order, non-hover-only interactions, pause/stop controls for animation, adequate target sizes.
• Understandable: Clear titles and legends, consistent scales/units, plain language, concise insight summaries, predictable behavior.
• Robust: Semantic markup, ARIA roles and names, programmatic relationships, compatibility with screen readers, cross-browser testing and fallbacks.

Color contrast is essential for the readability of charts, especially for people with low vision or color deficiencies. The use of custom colors or hex codes is discouraged, as they may not meet WCAG non-text contrast requirements. Salt tokens should be used to ensure compliance with WCAG, as they are designed to achieve at least a 3:1 contrast ratio between the background and non-text chart elements such as bars, lines, segments, and icons.

Using color alone to convey meaning makes charts difficult to understand to users with visual disabilities. You can enhance your chart’s accessibility by adopting additional visual strategies, such as:

• Line and Pattern fills to distinguish different categories
• Marker symbols for distinctive data points
• Direct labelling of segments

Try to also use borders with at least a 3:1 contrast ratio against the background to distinguish between segments to help distinguish them from each other.

Use line patterns to differentiate multiple line series.

Learn more about the available line patterns in the Color and pattern page.

Use pattern fills for two-dimensional shapes, such as bars and slices. Pattern fills should always be black as they are applied over solid categorical colors in charts. They are especially helpful when there is only one visual distinction between data points, ensuring that all users can easily differentiate between chart elements.

Learn more about the available pattern fills in the Color and pattern page.

Use marker symbols to make data points more distinctive and help differentiate lines. Marker symbols have a white border in both light and dark modes for accessibility. If you have more than five data series, the additional series will simply use the first symbol again. The symbols cycle through the available options, so for a sixth series, it would revert back to the first symbol in the defined set.

Salt uses predefined symbols in the following order:

• Circle
• Diamond
• Square
• Triangle (up)
• Triangle-down

Assistive technology users typically navigate charts using screen readers or keyboards—and may not always be unable to perceive visual elements in a complex chart or navigate the chart easily. Consider if the complexity of your chart warrants a text description or an equivalent format.

There are several things you could add to aid the understanding of your chart:

• A chart name
• A chart summary
• A progressive disclosure or an overlay containing a further description
• Data table or list in addition to the chart
• A link to a nearby page

A simple pie or donut chart with a small number of data points and no trends, for example, may not require a text equivalent, provided keyboard and screen reader users can perceive all the data points.

As a last resort, you can link to a nearby page via a link next to the chart. Try to keep these links adjacent to their respective chart, as placing essential information on a separate screen will disrupt the flow of information and increase unnecessary cognitive load.

For more information about alternative formats, read the JPMC UX Accessibility Resources (Internal users only).

We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.