Semantic Color
Colours assigned a fixed meaning, which only works if the assignment is consistent and never the only signal.
Definition
Semantic colour maps hues to communicative roles: success, warning, error, information and often a neutral or accent intent. The value comes from consistency, since the meaning is learned across the product.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
The standard set
| Intent | Typical hue | Used for |
|---|---|---|
| Success | Green | Completed operations, valid input, healthy status. |
| Warning | Amber or orange | Something needs attention but is not broken. |
| Error or danger | Red | Failures, invalid input, destructive actions. |
| Information | Blue | Neutral notices and explanations. |
| Accent or primary | Brand hue | The main interactive colour. |
Making a semantic system work
- Define each intent once, with a full ramp: text, border, background surface and icon.
- Name tokens by intent rather than by hue, so the palette can change without renaming everything.
- Keep the accent distinct from all four semantic hues, or a primary button will read as a status.
- Provide a dark mode variant for each intent, since semantic colours rarely invert well.
- Document exactly which situations use which intent, or teams will diverge.
In practice
Naming by intent, not by hue
Design tokensA token called color-danger-text survives a rebrand from red to a different hue. A token called color-red-600 does not, and every consumer has to be updated.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
Understanding Success Criterion 1.4.1: Use of Color
W3C, WCAG 2.1
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Applied through
Where this shows up as a concrete interface decision.
- Alert and Inline MessageComponent
- Badge and TagComponent
Related concept
Connected closely enough to change how you apply this.
- Use of ColorAccessibility
- Design TokensDesign system
- Brand Color in InterfacesUI foundation
- Color AccessibilityUI foundation
- Color SystemsUI foundation
- Color Theory for InterfacesUI foundation
- Dark ModeUI foundation
- Data Visualization ColorUI foundation
- EmphasisUI foundation
- HueUI foundation
- IconographyUI foundation
- Error MessagesUX writing