Understanding WCAG SC 1.4.1 Use of Color
1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
Note: This success criterion addresses color perception specifically. Other forms of perception are covered in Guideline 1.3 including programmatic access to color and other visual presentation coding.
Use of Color Transcript
Hello everyone! Today, we’re going to talk about the use of colors, along with its requirements, some failure scenarios, and how we can fix them. Color alone should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.Now let’s look at some failure scenarios. A calendar may show dates that are color-coded to indicate current dates and holidays, but if no other cues are provided, the information may not be accessible. Similarly, a paragraph with links in the same color as the surrounding text has no other differentiator, making it difficult to identify the links. Additionally, charts displaying market data might rely solely on color to highlight high, medium, or low performance areas. Finally, a contact form with fields highlighted in red to indicate errors can also pose problems.
While these scenarios may seem normal to many of us who can see colors, users with color deficiencies, older adults with vision impairment, and those without vision cannot understand information conveyed solely through color.
So, how can we fix these issues? First, we can use textual cues, such as required and error messages in forms. It’s also important to provide a 3:1 contrast ratio between surrounding text and links. Underlining links within sentences and paragraphs can help differentiate them. In charts and other images, using patterns alongside colors can effectively convey information. Additionally, providing textual cues and alternatives to describe what colors signify is crucial. Icons with appropriate text alternatives can also aid in conveying the status of UI controls and step progressions.
Remember, this is not to discourage the use of colors but to provide additional means of differentiation and identification.
This is the end of the video. Thank you for joining! If you liked the video, do like and subscribe.
Some of the best examples of use of color are, marking input fields in red color to convey errors or ‘required’ information, a button marked in green that performs the essential action like submitting a form, a text prompt that says “click the green button to submit the form”, a graph that uses only color to indicate the growth/decline percentage, etc. In all the above examples user is being asked to refer to a particular color to find information & if they cannot get to that color or understand what that color represents, then it is a failure of this check point.
Points to Ponder
Related Reads
- Color Palette Contrast Checkers Roundup
A curated list of color palette contrast checkers from around the web, use these tools to check or generate color palettes that are accessible. - WCAG Color Contrast Checker by DigitalA11Y
The WCAG color contrast checker is a simple to use tool the help you test if the foreground and background color meets necessary WCAG requirements. It also provides a comprehensive insight if the colors chosen meet the necessary contrast requirements and if they can be perceived by color blind users with Protanomaly, Protanopia, Deuteranomaly, Deuteranopia, Tritanomaly, Tritanopia, Achromatomaly, Achromatopsia. - Understanding SC 1.3.3 Sensory Characteristics
- Understanding Colour Blindness
- Colour Blindness in Gaming
- More Colour Blindess in Gaming
- Understanding Success Criterion 1.4.1: Use of Color by W3C
