Colour is a valuable tool for communicating meaning. But if you can't see colour, then meaning is lost. Always plan to use colour to convey meaning in combination with another means of identification.
Colour and meaning is difficult or impossible to see for many people, for example:
- People who are blind browsing with a desktop screen reader or browsing with a mobile screen reader wont be able to see colour
- People with low vision can find colours difficult to see
- People who are colour blind may not be able to tell the difference between certain colour combinations
- People with Autistic Spectrum Disorders may not understand or interpret colours in the way they are intended
- People browsing with black and white displays wont be able to see colours
Rules for using colour
Colour should never be the only way to identify something. Colour must always be accompanied by other means of identification. This could be visible text, underlines, borders, or shapes depending on the type of content being displayed.
If highlighting form errors with a visual change, for example by placing a red border around a form field, also include an error message in text next to the field.
Links embedded in sections of text should be underlined, have borders, or some other visual change as well as be in a different colour so they are easy to see.
Icons must have different shapes, text labels, or some other visual change as well as different colours.
Graphs and charts
Graphs and charts must combine colour with text labels or patterns and legends.
Tips for using colour to convey meaning
- Design content without colour first, then add colour to reinforce meaning
- Switch your screen to black and white to see if you can identify links, error messages and other elements that convey meaning
For more information about the Web Content Accessibility Guidelines, read our WCAG primer.
We like to listen. If you have a project, product, problem, or idea that you want to discuss, get in touch!