Do not rely on colour alone
Information communicated through colour must also be made available in a way that does not use colour.
Meeting the Web Accessibility Standard
When colour is used to convey information, and that same information is also conveyed in a way that does not use colour, this meets WCAG 2 Success Criterion 1.4.1 Use of Color (Level A).
Considerations when conveying information using colour
In visual design, colour is an important way of conveying information. For instance, colour is used to do things like:
- distinguish different types of content
- emphasise important content
- indicate to users what to do.
Designing with colour in an accessible way means not using colour as the only way to convey information, as some people will not be able to perceive it.
So, when you use colour to convey meaning, you must make sure that same information is also available in another way, such as:
- in text
- through another visible cue, such as an underline, pattern or shape
- through sufficient contrast ratio between the element and its background (sufficient contrast is considered a valid way to convey information visually that does not involve relying on colour).
- Indicating an error in a form field: Form fields are often highlighted in red if they have an error, but adding the word “Error” to the relevant form field’s label will ensure that people will understand there has been an error, even if they cannot see the red highlight.
- Identifying links within a passage of text: Link text and non-link text might have different colours, but adding another visual cue or mark, such as an underline, makes links stand out regardless of the user’s colour perception.
- Identifying multiple bars in a bar chart: Each bar is a different colour, but adding a different pattern to each one, alongside a legend explaining the patterns, means that the chart can still be read by someone who cannot see colour, as well as someone looking at a greyscale print-out of the chart.
- Indicating the state of a button: A button’s focused and unfocused states have different colours. If the only indication of a button’s different states — for example, whether it’s receiving focus or not — is a change of colour, then ensuring that those 2 colours have a minimum contrast ratio of 3:1 is one way to make sure that the difference between the states remains visible to people with low vision or colour-blindness.
Be careful when relying on contrast
While contrast can be used as a non-colour based way to indicate information, content with a 3:1 contrast ratio can still be difficult to see for many people as well as in different scenarios — for example, when reading content on a phone outside in the bright sun.
If information is going to be conveyed visually by only using a combination of colour and contrast, consider aiming for a higher contrast ratio, like 4.5:1.
Better yet, convey the information in another way that relies neither on colour nor contrast, such as by adding a visual mark or some text.