Colour · 03 of 04
Give accent colours a consistent role
Use emphasis deliberately so readers can recognise actions and status.
The idea
An accent is useful when it helps someone find or interpret something.
If headings, borders, icons and actions all have equal colour emphasis, the page can become harder to scan. Decide which roles need emphasis before applying it broadly.
Use those roles consistently across screens. A primary action may share the brand accent, while warnings need a distinct treatment with explanatory text. There is no fixed number of coloured elements that makes a page work. Judge the balance against the task, and preserve meaning with labels or shapes as well as colour.
How to see it
Terms used in this lesson
The parts
- Accent
- A colour treatment used for deliberate emphasis.
- Status
- A condition such as success, warning or error.
- Secondary cue
- A label or shape that communicates meaning alongside colour.
In practice
- Define the purpose of each accent
- Keep status treatments consistent
- Pair meaningful colour with a second cue
Avoid
- Emphasising decoration more than the main task
- Changing a status colour's meaning between screens
- Relying on hue alone to explain an error
The test
Look at the most prominent coloured elements. Do they draw attention to the right actions, and does the same treatment mean the same thing elsewhere?
Use the Colour Vision Simulator to inspect a screenshot for colour distinctions that need an additional label or shape.
Sources
- Johannes IttenThe Art of Color 1961
- Josef AlbersInteraction of Color 1963
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.