WCAG Success Criterion 1.4.1: Use of Color focuses on elements where colors are used to convey information. When color alone conveys meaning, it may prevent access to that information for users with low vision or with disabilities related to color perception.
One strategy for compliance with this success criterion is to identify similar elements that are different colors, and then determine whether the difference in color is meaningful. If the colors are for decoration only, and no meaning would be lost if the colors were removed, then this success criterion does not apply.
The following are some common examples of use of color failures where information is conveyed by color alone:
- In a paragraph of text, a link is a different color than the surrounding non-interactive text, and it has no other visual markers to show it is a link.
- When a button receives keyboard focus, it changes color, and it has no other visual marker to show it is in focus.
- In a graph, one trend line is blue and another trend line is orange, and the lines have no other visual marker to show which line represents which trend.
- In a list of navigation links, the link to the current page is a different color than the others, and the link has no other visual marker to show it is the current page.
- In a schedule of events, Room 1 events are colored purple, Room 2 events are colored green, and Room 3 events are colored pink, and the events have no other visual marker to show which room they are assigned.
- After the user completes a quiz, incorrect answers turn red, and the answers have no other visual marker to show whether they are wrong.
Note that a difference in color that reaches at least 3:1 contrast also creates a difference in luminosity (meaning, one color will appear much lighter or darker than the other). In some cases, this can be considered a visual marker that does not rely on color alone and meets this success criterion.
However, if the user must not only perceive that two colors are different, but must also correctly identify the colors to understand their full meaning, then contrast is not enough to meet this success criterion. For example, in a quiz where incorrect answers have turned red, the user may be able to perceive that answers are displayed in two different colors, but not be able to identify which color is red to know which set of answers is incorrect. In this scenario, the user with a color perception disability is not receiving the same information as other visual users.
There are many potential ways to address use of color failures. To learn more about consulting with an accessibility specialist on these and other questions, contact Accessible Web.