Use of Colour
- Kim Collins (Unlicensed)
Some users cannot perceive colour, or have limited colour perception. Other users may be viewing your web site or application in monochrome. Some users will choose to view in grayscale to reduce distraction.
For these users, information must not be conveyed by colour alone. Colour can be used in design as a visual cue, but it must be accompanied by other visual and/or textual cues.
The following table shows some examples of ways to provide cues in addition to colour.
| Colour-only | Additional cue |
|---|---|
| "Press the green button" | "Press the green 'Go' button" |
| Form fields with an error have a red border | Fields with an error have an exclamation mark icon and a red border |
| In a chart, red represents current sales | Current sales are indicated with both red and a pattern, or are clearly labelled with text |
It is helpful to think about your interaction design and web content as if it were presented in black and white only. There are several browser extensions and Photoshop filters that can show your design in grayscale.
Tips for avoiding reliance on colour:
It is important to provide other ways of conveying information that are not dependent on colour. That said, colour can be used as long as it is paired with a non-colour dependent indicator.
Use text link styles that have a non-colour dependent indicator (e.g. underline). Be consistent (e.g. if links are styled with an underline, do not also style non-link content with an underline).
Before creating graphics, charts, and maps, consider how the information can be provided without depending on colour (e.g. using pattern, text)
Test with a grayscale tool
Resources
Grayscale the Web Chrome Extension