Relying on color alone to communicate information causes barriers to access for many readers: colorblind and low vision users may not be able to perceive the color differences, and screen readers do not announce colors to non-sighted readers.
- Have a secondary indicator that text is linked: not just another color, but also underlined, or bold, or placed on a color background.
- When differentiating elements in charts and graphs, do not just change the color, also change shapes, patterns or the like, or provide some other other visual differentiation like direct segment labels.
- Provide a text alternative for very complicated charts and graphics.
Don't do This
Why Is This Wrong?
The only way to correlate the data series to the values in the line graph is through color, and no text alternative is available (the alt text on the image reads: "line chart of color contrast vs background color")
Without color perception, these issues become starkly apparent:
|Color||Contrast on White||Contrast on Black|
Why Is This Right?
Many alternatives to color are visible here:
- The lines are differentiated by vertex point shape and a hash pattern as well as color.
- The labels are visually linked to their lines.
- A purely text alternative is provided with the source data.
Using markers in the line graphs that correlate to the series legends provides a visual redundancy and no longer relies on color alone to communicate information. Adding the data table as a text equivalent actually renders the graphic as decorative content as well.
Here is the same chart in black and white:
It may not be easy to understand this without color, but it is certainly possible to locate lines based on shape and label proximity and then track them to their opposing matching vertex shape. But providing the table means a user presented with this challenge, or a screen reader user, could simply skim the table instead.
Testing for Accessibility
There are no automated or programmatic tests for this requirement; you simply have to review your content and design to ensure you do not have any items (like charts and graphs) that rely on color as the sole means of communication.