1.4.1 - Use of colour
Do not use colour as the only way to convey any piece of information.
Summary
Colour 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.
Requirements
Colour 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 colour as having special meaning has another indicator - a visible border and label, underline or other visual effect.
- Information graphics and charts that use colour as a key also provide distinctive non-colour 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 colour alone, the contrast ratio between their colour and the colour 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?
- This ensures that people who are unable to see colours, or who have difficulty telling different colours apart, understand the content and user interface.
- Colours can be difficult to distinguish in bright sunlight.
- Screen readers do not detect colour.
- Some users will change colour settings for their whole computer, such as applying a tint to help with reading.
Official wording in the Web Content Accessibility Guidelines
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)
See the W3C's detailed explanation of this guideline with techniques and examples.
Guidance for Design
Colour is often used to show:
- a tab is selected,
- a link is available,
- text is an error message,
- emphasis,
- charts and graphics, or
- other meaningful information.
Additional visual and non-visual methods of identifying information or meaning must be applied to complement the use of colour:
- Visual cues could be:
- text complementing colours;
- 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-disabledfor the Web); - suitable 'Accessible Names' for elements;
- ...
Common mistakes
- A form uses only colour to indicate a required field.
- Colour-coding text or backgrounds to indicate essential content, pass/fail categorisation, etc.
- Links are only distinguished from plain text by colour and the colour may not vary from the main body text.
- Text alternatives that do not include information conveyed by colour differences in the original image.
- The error state of a input field is only identified by changing the colour of its border.
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 colour alone, the contrast ratio between their colour and the colour 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.
More guidance for Design
- Understanding Colour Blindness
- Inclusive Design Tips: Presenting Information in Multiple Ways by Deque