Semantic Color: Status, States, and Feedback in UI
In an interface, color is not decoration - it is language. Green means done, red means stopped, amber means careful; a button darkens when you press it and dims when it is off. Get this semantic layer right and the product feels obvious; get it wrong, or lean on color alone, and you lock out a tenth of your users. This is the interactive guide to color that carries meaning.
Color as meaning
A brand color expresses identity; a semantic color expresses information. When a form field turns red, the red is not aesthetic - it says "error." That is a fundamentally different job, and it is why mature design systems separate brand colors from semantic colors and from state colors. Each answers a different question: who are we, what does this mean, and what is happening to this element right now.
The power of semantic color is consistency: if green always means success and amber always means caution, users learn the vocabulary once and read every screen faster. The risk is that color is a weak channel - easily lost to color blindness, glare, grayscale, or a cheap display - so meaning must never ride on color alone.
The semantic roles
A typical product needs a handful of semantic roles, each conventionally tied to a hue: success (green), warning (amber/yellow), error / danger (red), info (blue), and neutral (gray). But a role is not one color - it is a small set: a strong fill, a readable text shade, and a soft background tint. Generate a full semantic set from base hues below.
From a hue to a usable role
Each role gets three derived values: a fill for solid elements, a contrast-safe text shade for words on a light background, and a subtle tint for banner backgrounds. Nudge the hues and the whole semantic set rebuilds consistently - the basis of a themeable system.
Interactive states
A control is never just one color - it has a life cycle. Default at rest, hover when the pointer is over it, active while pressed, focus when reached by keyboard, and disabled when unavailable. Deriving these from a single base keeps them tidy: hover usually shifts lightness a step, active a step more, disabled desaturates and lowers contrast, focus adds a visible ring. Build the set from your action color.
One base color, the whole life cycle
Pick the action color; the buttons show each derived state. Notice the focus button keeps a clearly visible ring (never remove focus styling), and the disabled button is desaturated and lower-contrast so it reads as inert without being invisible.
Never color alone
The single most important rule of semantic color: color must never be the only signal. Around 1 in 12 men and 1 in 200 women have a color-vision deficiency, and color is also lost to glare, night mode, grayscale printing, and bad screens. WCAG requires a second cue - an icon, a label, a shape, or text. Toggle a color-blindness simulation and watch color-only status collapse while redundant cues survive.
What survives color blindness?
Two status lists show the same information. The top relies on color only; the bottom adds an icon and label. Switch on the deuteranopia (red-green) simulation: the color-only list becomes ambiguous - success and error look alike - while the labelled list stays perfectly clear.
COLOR ONLY
COLOR + ICON + LABEL
Accessible feedback components
Alerts, toasts, and inline validation are where semantic color does its daily work. A good alert uses the role's tint as a background, the role's text shade for legible words, a colored border for the accent, and an icon + heading so the meaning never depends on color. Each must clear the WCAG contrast bar - check it live.
Alerts that pass the contrast bar
The four standard alerts, built from the semantic palette. Each shows its text-on-tint contrast ratio and whether it meets WCAG AA for body text (4.5:1). Adjust the tint strength: a too-saturated background can drop the text below the line - the readout catches it.
Semantic tokens and theming
The reason semantic color scales is tokens. Components reference a meaning -
color-error-text, color-success-bg - not a raw hex. A theme then maps
those meanings to actual values, so light, dark, and high-contrast themes all keep the same
semantics while swapping the numbers. The color-system article covers the token machinery; here
the point is that meaning is the stable layer and value is the variable one.
color-warning - the meaning, referenced by every warning
component.-fill, -text, -bg,
-border - the parts of a role.Pitfalls and gotchas
Test your understanding
Six questions on semantic roles, states, color-not-alone, and tokens. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.
Quick check
Continue your journey
Semantic color sits on top of the system, the contrast rules, and the brand it must stay distinct from.
Color in Typography and Text
The same not-color-alone rule, applied to links and readable text.
Design · 36Building a Color System: Scales, Tokens, Themes
The token machinery that makes semantic color themeable.
Design · 13Accessible Color Design and WCAG Contrast
The contrast bar every semantic color must clear.
Vision · CVDColor Blindness and Color Vision Deficiency
Why color-only status fails, and who it fails.
Design · DarkDark Mode and Adaptive Color
Keeping semantics consistent across light and dark themes.
Design · 43Color in Branding and Identity
The brand color that must stay distinct from your semantics.
Design · 25Color in Data Visualization
The other place meaning is encoded in color - and must not be alone.