How do you define colours and semantic roles?
Organise colours by purpose, then check text, backgrounds, and state messages together.
A colour system assigns stable rules to different purposes. It helps users distinguish text, backgrounds, actions, and feedback, rather than simply covering a page with brand colours.
Keep these basics in mind
- A semantic role names a purpose, such as primary text or error message, instead of just dark grey or red.
- Neutral colours are close to black, white, and grey, often used for text, borders, and backgrounds. Brand colours express identity and emphasis.
- Contrast is the difference in lightness between foreground and background. Check text against its actual background.
- An error needs more than red: explain where it occurred and how to fix it. Combine text and icons where useful.
See Spectrum’s colour guidance for purpose and accessibility. Colour and hierarchy are also foundational topics in Graphic Design: The New Basics .
A colour selection process
Illustrative colour rules
These are purposes, not colour values adopted by this project.
| Content | Previous approach | Organised by purpose |
|---|---|---|
| Body text | Each page chooses its own grey | Use the primary text role |
| Save failure | A red border only | Error colour plus a specific explanation |
| Brand decoration | As prominent as an error | Distinguish decoration from status information |
Walk through an example
For an invalid email, the team identifies the purpose as error feedback. They choose error text and border roles and add Enter a complete email address. They check the combination on the form background and confirm that users can understand the correction without identifying red.
Limits and common misunderstandings
One colour may not be readable on every background. Stable roles need not use identical values in every theme. Brand, success, and error colours vary by project; one company’s palette is not a universal standard.