Semantic color roles: design success, warning, error and information states

A brand accent is not a complete status system. Give messages clear words and symbols, then choose colors that support those meanings on the surfaces where they appear.

Reviewed 11 October 2026 · 4 min read

Separate the message from the color

“Saved successfully” communicates a result. A green dot alone may not. Use visible words and an appropriate icon, shape or pattern wherever color carries essential meaning. A red brand button does not automatically mean “error,” and a yellow illustration does not automatically mean “warning.” Keep those relationships explicit in the interface.

The studio now includes success, warning, error and information text roles for each theme. They are foreground colors intended for text or icons against the page or surface. They are not background fills with automatically derived labels, nor a claim that those hue associations suit every culture or product.

Check each actual surface

A status color that works against the page may fail inside a tinted card. The studio checks each status against both surfaces, using the selected normal-text target. If your product shows a filled banner or a tooltip with another background, test that separate pair in the contrast checker. Do not copy a text token into a banner fill and assume its old result still applies.

Worked example: an error beside a form field

Error red #B42318 on white #FFFFFF has 6.57:1 contrast. On near-black #222127, it has 2.43:1. The same exact red is therefore not an equally suitable normal-text foreground for both surfaces. Inspect the dark pair, or build separate theme roles in the studio.

Write a specific message such as “Enter a valid email address.” Associate it with the field programmatically and keep a visible cue besides red. Our preview demonstrates the color and text relationship; an implementation must still supply appropriate form semantics, focus behavior and announcements.

Add product-specific roles deliberately

Open “Extend your system” in the studio to add a named custom role. Supply exact colors for both themes and choose the role’s intended use: text, meaningful UI, or decoration. Text checks use your selected 4.5:1 or 7:1 target against page and surface; UI checks use 3:1. Decorative roles are exported without a contrast pass/fail claim.

A role such as “Selected navigation” should describe a job that stays useful when the hue changes. Lock the theme color if a repair must preserve it. Generation retains your custom roles; an explicit repair may adjust an unlocked checked role. Review the proposal first and use Undo if the tradeoff is wrong.

Use scales as candidates, not certificates

A scale holds eleven candidate shades. Add separate brand, neutral or accent scales, then edit individual hex values or shift hue, chroma and lightness in OKLCH. All output is mapped to sRGB. Strong adjustments can compress neighboring shades; individual edits can also break their lightness order.

Scale shades are not included in the component pass count because their job is not yet known. Once a shade becomes a border, text color or filled control, inspect the foreground/background relationship in context. A neatly ordered scale does not establish contrast compliance.

Keep the decisions through handoff

CSS and Tailwind exports include named custom roles and scale variables. DTCG export places light and dark roles in separate groups and named scales under color.scales. Your consumer must configure theme mapping; the group names do not create automatic modes. Project JSON preserves editing information and locks. Read the format guide before choosing a file.

Open the SVG swatch sheet in a design tool when you need a portable visual reference. It carries labels and exact hex values, but importing SVG artwork does not create semantic Figma variables. Keep the token or project file alongside the design and verify the actual consumer’s output.

Sources and limits

W3C: Use of Color explains the need for information beyond color. Non-text Contrast covers meaningful visual boundaries and graphical objects. The text contrast criterion defines the thresholds used here. These color checks do not assess a whole form, chart, interaction or website.

Our examples use original palette values and the WCAG 2.2 calculation. Full methodology and primary sources.