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).
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.