Access · 02 of 04
Pair colour with another signal
Make important meaning available through text, shape or another visible cue.
The idea
Colour can highlight an error or distinguish a chart series, but people should not need to identify the hue to understand the message.
Add a clear label, pattern, icon or other cue that preserves the meaning.
For forms, explain an error near the relevant field and connect the message to the control. For charts, use direct labels or distinguishable marks. For text links, an underline is a clear starting point. A greyscale or colour-vision simulation can reveal problems, but it does not replace checking the complete experience.
How to see it
Terms used in this lesson
The parts
- Second cue
- A text or shape signal that accompanies colour.
- Direct label
- A label placed with the item it describes.
- Status message
- Text explaining a condition or result.
In practice
- Explain errors in text
- Distinguish chart series beyond hue
- Make links recognisable within prose
Avoid
- Red and green as the only status distinction
- Unlabelled colour keys
- Treating a simulation as complete user testing
The test
Remove colour temporarily. Can you still identify errors, selected items, links and chart series without guessing?
Use the Colour Vision Simulator to compare a screenshot under different colour-vision simulations. Use the result to find missing labels or other cues, alongside user testing.
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.