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 plate
Reach for this when
- Defining a colour system.
- Designing alerts, validation and status displays.
- Defining the layer between a raw palette and the components that consume it.
Common mistakes
- Colour as the only signal.
- Accent colour that collides with a semantic colour.
- Hue-based token names.
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.
The semantic set, and what each must carry besides colour
| Role | Also needs |
|---|---|
| Error | An icon, a message, and focus moved to it when it interrupts |
| Warning | A statement of what will happen if it is ignored |
| Success | A description of what completed, not only a tick |
| Information | A reason it is being shown now |
| Disabled | An explanation of what would enable it |
| Selected | A non-colour indicator, such as a tick, a border or a label |
In practice
- i.
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.
- ii.
Naming by intent
Why the token is not called redA token named danger can be re-themed, re-hued for a market where red means something else, and understood by anyone reading the code. One named red-600 can do none of those things.
Local chart
FND·023 · Region II · Grid C2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
- [1]
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 MessageCMP·015 · Component
- Badge and TagCMP·023 · Component
Short definition
The one-paragraph version, for when that is all you need.
- Semantic ColorTERM·066 · Term
Related concept
Connected closely enough to change how you apply this.
- Use of ColorA11Y·010 · Accessibility
- Design TokensSYS·001 · Design system
- Brand Color in InterfacesFND·024 · UI foundation
- Color AccessibilityFND·028 · UI foundation
- Color SystemsFND·026 · UI foundation
- Color Theory for InterfacesFND·019 · UI foundation
- Dark ModeFND·027 · UI foundation
- Data Visualization ColorFND·029 · UI foundation
- EmphasisFND·018 · UI foundation
- HueFND·020 · UI foundation
- IconographyFND·050 · UI foundation
- Error MessagesWRT·002 · UX writing