Accessibility Tip of the Week: Don’t rely on color alone to convey meaning

This week Robert Hardy, our district website accessibility specialist, shares about how to use color to enhance design — not drive it. Please call Robert with any accessibility questions at Ext. 6105. He is more than happy to talk by phone or schedule a time to meet with you.

When designing content for the web, be sure not to rely on color alone to convey meaning. Use color to enhance design, but not drive it. Colorblind or screen reader users may not be able to easily perceive differences in color, which can create confusion.

Take for example the graph below showing this week’s high temperatures in Seattle and Olympia.

High temps for Seattle and Olympia are shown, with Seattle represented by a blue line and Olympia represented by a orange line

While this may appear to clearly convey the data, looking at this graph with the colors removed quickly reveals problems. What line represents each city?

The same high and low temps line graph is shown, but with colors removed. Both Seattle and Olympia are represented by black lines, creating confusion.

By adding texture to the lines in the graph, line labeling can be clear, regardless of the colors being used.

Color Alone3 (1)

To make these graphs even more accessible, the author could also include the accompanying data table, as was discussed in the Providing Alternative Text for Complex Images blog post.

When working with text alone, additional differentiation could be added through bolding, underlining or the inclusion of accompanying symbols. These tools enable color to accentuate a message, rather than convey it. Always consider what information would be lost if the document was converted to grayscale.

If you have any accessibility tips or questions, please reach out to Robert Hardy (6105), the district’s Website Accessibility Specialist.