1.4.1 Use of Color (A): 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)
Requirements
- Color alone is not used to convey information (e.g. to identify form fields with invalid entries or the current step in a step indicator) or to distinguish between areas of a map or graph. Additional visual cues are used to provide the same information (e.g. icons, shapes, patterns, text).
- Text identified by color as having special meaning has another indicator – a visible border and label, underline or other visual effect.
- Information graphics and charts that use color as a key also provide distinctive non-color differences – hatching patterns or directly applied labels.
- All links within blocks of text are underlined, and no other content on the page is underlined.
- If links cannot be underlined and are identified via color alone, the contrast ratio between their color and the color of the surrounding text is at least 3:1, and their visual appearance changes (e.g. they become underlined) when they are hovered by the mouse pointer and receive keyboard focus.
Why is it important?
- This ensures that people who are unable to see colors, or who have difficulty telling different colors apart, understand the content and user interface.
- Colors can be difficult to distinguish in bright sunlight.
- Screen readers do not detect color.
- Some users will change color settings for their whole computer, such as applying a tint to help with reading.
Summary
- Do not use color as the only way to convey any piece of information.
- Color alone should not used to convey information (e.g. to identify form fields with invalid entries or the current step in a step indicator) or to distinguish between areas of a map or graph.
Common Mistakes
- A form uses only color to indicate a required field.
- Color-coding text or backgrounds to indicate essential content, pass/fail categorisation, etc.
- Links are only distinguished from plain text by color and the color may not vary from the main body text.
- Text alternatives that do not include information conveyed by color differences in the original image.
- The error state of a input field is only identified by changing the color of its border.
Design Guide
Color is often used to show:
- a tab is selected
- a link is available
- text is an error message
- emphasis
- charts and graphics
- other meaningful information
Additional visual and non-visual methods of identifying information or meaning must be applied to complement the use of color:
- Visual cues could be:
- text complementing colors
- text styles (such as underline, bold or italic)
- patterns (in graphs or infographics, for example)
- icons with suitable alternative text
- border-with changes (to identify that a text input field is in focus, for example)
- Non-visual cues, which are programmatically available to assistive technologies, could be:
- visually hidden text
- HTML element tags (such as aria-disabled for the Web)
- suitable ‘Accessible Names’ for elements
How to style links?
- It’s best for all links within blocks of text to be underlined, and no other content on the page to be underlined.
- If links cannot be underlined and are identified via color alone, the contrast ratio between their color and the color of the surrounding text is at least 3:1, and their visual appearance changes (e.g. they become underlined) when they receive the mouse hover and keyboard focus.
Note that this method doesn’t help users using touch screen devices - Links in a navigation menu do not need underlining, as their presence of a navigation menu makes it obvious that they’re links.