Understanding WCAG Success Criteria 1.4.1 Use of Color

Color is an important part of the visual process. It sets the tone for a website and provides emphasis to various design elements. 1.4.1 Use of Color requires that color is not the only way information is communicated, to ensure users with any level of color deficiencies are able to differentiate between or identify visual elements. 

There are many visual aids that rely on color to communicate information. For example:

• Required form fields highlighted in blue
• Warning messages differentiated from other text in red
• Charts with color coded results, e.g.: Mary's sales are in yellow, Tom's are in green.
  
  

For some users, these visual cues may not be enough. This includes people with:

• Colorblindness
• Partial colorblindness
• Partial sight (often causes limited color perception)
• Color perception degradation due to old age
  
  

The Use of Color criteria doesn't prevent utilizing color for emphasis. The requirement simply calls for secondary identifiers alongside color that would enable users with color perception difficulties to make the necessary differentiations requested by that element.  

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Solutions

accessiBe offers a whole set of tools to adapt the coloration of a page.

The Color & Display Adjustments section of the accessiBe panel allows a user to adjust for any level of color perception issues they may have. Someone with difficulty differentiating between tones of a single hue can increase the contrast or saturation of the page. A user with partial color-blindness can adjust text and background colors based on their needs. This tool also provides the ability to invert the colors on the page or remove colors entirely and view the page in monochrome. 

Another tool accessiBe provides that may assist with this criteria is called Emphasize Links. Links on a website are typically differentiated from other text by a different color. In addition to the color, links are often either bolded and/or underlined as a second method of differentiation. (On our website, if you hover over a link, a thick underline will appear beneath it for additional emphasis.) If a website does not bold or underline links and only relies on color, a segment of users will have difficulty identifying these. accessiBe's Emphasize Links tool will put a  box  around every link on the page, for an additional differentiator. 

Warnings

accessiBe can adjust the formatting of a website, but cannot change all of its elements. When designing your site, try to be mindful of elements that rely exclusively on color to attract users' attention.

Here are two examples:

Forms
Many forms have fields that are required in order to be submitted. If a required field isn't filled out, the field displays a warning. Sometimes, this is achieved by highlighting the border of the required field in red. If this is the only way the warning is displayed, people without the ability to see color will not recognize the warning. Be sure to include a secondary text cue, like a message stating, "This is a required field."

Diagrams & Graphs
Diagrams and graphs often rely on color as a primary way of communicating information. A pie chart, for example, will use a different color or hue for each slice. Someone who has difficulty differentiating between colors would not be able to make out the data unless there is a second means of communicating the information. This can be achieved by using patterns or labels, in addition to the color differentiation.