Any rule or guideline is subject to interpretation and, sometimes, misinterpretation. The rules surrounding how color affects digital accessibility are no exception. While color contrast is usually better-known and more-frequently cited, use of color is an important checkpoint to understand and follow (and unfortunately an area that many designers misunderstand).
When broken down, use of color is fairly straightforward.
WCAG 2.1 Success Criterion 1.4.1 Use of Color — Level A
Use of Color is the name of a success criterion in the Web Content Accessibility Guidelines (WCAG). It has a Level A conformance level, which means it is required to meet any level of accessibility compliance; or, that any website or app that fails this checkpoint cannot be considered fully accessible at even the lowest level of conformance.
The rule states that:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Why can't color be the only visual cue?
For some, the specific rules of accessibility might feel abstract or arbitrary at times. Use of color should not fall into that category.
Not everyone will detect color, perceive it in the same way, or be able to easily differentiate one color from other colors. For this simple reason, we can't rely solely on color.
How can someone decide if color conveys meaning, indicates an action, prompts a response, or distinguishes a visual element?
If one accepts that color alone can't be used to make important distinctions, how can they determine if they're using color appropriately?
This is actually pretty easy to test. If it starts to feel complicated, take a step back and try to honestly determine if the issue is being viewed from a perspective of wanting an existing design to pass and backfilling from there, rather than starting with these two helpful and straightforward questions:
- If color is removed, does everything still make sense?
- What has been added, besides color, to make important distinctions?
These questions will guide designers well.
What are some examples of proper use of color?
- Including text labels for charts and graphs to supplement the use of color.
- Adding stripes, dots, or other design element to chart and graph components to supplement the use of color, if the components are categories or elements with different meanings.
- Adding icons and text cues to indicate invalid or incomplete information in a form.
What are some examples of improper use of color?
- Distinguishing links or active elements from static content only by the use of color.
- Using color alone to show user or system error.
- Using color alone to show progress or status.
- Relying on color to show strength of password.
When in doubt, return to the guiding questions:
- If color is removed, does everything still make sense?
- What has been added, besides color, to make important distinctions?
Was this content helpful?
Subscribe to our blog and newsletter.
