This document is in beta. Help us by reporting issues via Github or email
Back to the overview page
Use of colour
On this page:
Summary
Do not use colour as the only way to convey any piece of information.
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-disabled for 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
Guidance for iOS
This section needs more content. Contribute via Github or email.
Guidance for Android
This section needs more content. Contribute via Github or email.
Guidance for Flutter
This section needs more content. Contribute via Github or email.
Guidance for Web
More info
Sources
Contribute
This document is in beta. Help us by reporting issues via Github or email