Understanding Success Criterion 1.4.1 [Use of Color]
1.4.1 [begin add]Color must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.[end add] [begin delete]Any information that is conveyed by color differences is also simultaneously visually evident without the color differences.[end delete] (Level A)
[begin add]Note: This success criterion addresses color perception specifically. Other forms of perception are covered in Guideline 1.3. [2255]
[end add]
Intent of this Success Criterion
The intent of this success criterion is to ensure that all users can access information that is conveyed by color differences. If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by those with color deficiencies. In this case, providing the information conveyed with color through another visual means ensures users who cannot see color can still perceive the information.
Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.
Specific Benefits of Success Criterion 1.4.1:
This success criterion benefits people with visual disabilities:
Users with partial sight often experience limited color vision.
Some older users may not be able to see color well.
Users who have color-blindness benefit when information conveyed by color is available in other visual ways.
People using text-only, limited color, or monochrome displays may be unable to access color-dependent information.
Examples of Success Criterion 1.4.1
A form that uses color and text to indicate required fields
A form contains both required and optional fields. Instructions at the top of the form explain that required fields are labeled with red text and also with an icon whose text alternative says, "Required." Both the red text and the icon are programmatically associated with the appropriate form fields so that assistive technology users can determine the required fields.
An examination.
Students view an SVG image of a chemical compound and identify the chemical elements present based on the colors used in the diagram. The text alternatives associated with each element name the color of the element and indicate the element's position in the diagram. Students who cannot perceive color have the same information about the compound as their classmates. (This technique also satisfies Guideline 1.1 Level A.)
Disabled Form elements.
Form elements which are disabled via markup or scripting, are greyed out and made inactive by the user agent. When in the disabled state these elements do not receive focus. Assistive technologies can programmatically determine the state of disabled elements and will provide this information to the user as the elements are encountered on the page. The change in color and loss of focus provides redundant, visual information about the state of the control.
Related Resources
Resources are for information purposes only, no endorsement implied.
Techniques and Failures for Success Criterion 1.4.1 [Use of Color]
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this success criterion. The techniques listed only satisfy the success criterion if all of the WCAG 2.0 conformance requirements have been met.
Sufficient Techniques
Instructions: Select the situation below that matches your content. Each situation includes techniques or combinations of techniques that are known and documented to be sufficient for that situation.
Situation A: If the color of particular words is used to indicate information:
G14: Ensuring that color-encoded information is also available in text
Ensuring that when text color is used to convey information, the text style is visually differentiated without color (future link)
Conveying all information in text that is conveyed in color (future link) [2031]
Common Failures Identified by the Working Group
The following are common mistakes that are considered failures of Success Criterion 1.4.1 by the WCAG Working Group.
Additional Techniques (Advisory) for 1.4.1
Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.
Conveying information redundantly using color (future link)
Changing the background color or border of the element with focus (future link)