Color Alone

11. Avoid Using Color Alone

Relying on color to communicate information causes barriers to access for a number of users with diverse abilities. Primarily, communicating with color alone causes barriers to access for the non-sighted user and the colorblind user. We cannot rely on the user having the sensory ability of color perception in order to perceive, operate, and understand our content. 

Best Practices

  • Provide shapes, patterns, text equivalent, or other visual differentiation in addition to color to differentiate content
  • Provide an equally effective alternative format like a plain text formatted, WCAG AA compliant PDF

Don't do This

Using Color Alone to Communicate Information

Sales data line graph

Why Is This Wrong?

The only way to correlate the data series of 'Cost' and 'Sales' to the values in the line graph is through color. Add visual redundancy to the data series and lines that depict values so a sighted user can decode the information with more than just color. Also, add a data table for a text equivalent. NOTE, adding a data table will effectively render the line graph as decoration. 

NOTE: this graph is also in violation of SC 1.1.1 for alternative text description. The solution provided in the compliant example will solve for both SC 1.4.1 and SC 1.1.1. 

Do This

Using Color Alone to Communicate Information

Line graph data in table proceeding

Month Sales Cost
Jan  $10,000.00  $8,000.00
Feb  $15,000.00  $12,000.00
Mar  $12,000.00  $9,600.00
Apr  $11,000.00  $8,800.00
May  $17,000.00  $13,600.00
Jun  $18,000.00  $14,400.00
Jul  $20,000.00  $16,000.00
Aug  $18,000.00  $14,400.00
Sep  $17,000.00  $13,600.00
Oct  $16,000.00  $12,800.00
Nov  $12,000.00  $9,600.00
Dec  $11,000.00  $8,800.00

Why Is This Right?

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.