What Are Semantic Colors? How to Design Colors for Success, Warning, and Error
When a website needs to say that something was saved, needs attention, or failed, choosing different shades of green, yellow, and red on every screen leads to inconsistent messages. Semantic colors solve this by assigning a shared meaning to each color role. Here we will design Success, Warning, and Error colors for a business web interface in which staff upload CSV (comma-separated values) inventory files from individual stores.
Define what Success, Warning, and Error mean before choosing colors
Success means that an operation has actually finished. Do not display success just because someone clicked Upload; first confirm that the file was imported. Warning means something needs attention but does not necessarily prevent the operation from continuing, such as an approaching deadline. Error means a required action cannot proceed or a process has failed. The message should explain the problem and what the person can do next.
Decide these conditions first, and only then select the colors. Green, amber, and red are familiar options in many interfaces, but no single set is mandatory. Keep the meanings separate from brand colors and the primary button color. In particular, do not label a normal “Processing” state as Warning without a reason, or assume every stopped process is an Error.
Design the background, text, icon, and border as a set
Imagine three notification panels on a white #FFFFFF page. A HEX code is a hexadecimal way of specifying a web color. The following examples assign one pale color to each panel background and one darker color to its heading, message text, meaningful icon, and outline. Reusing those roles across a product makes the system easier to maintain.
| Meaning | Notification background | Text, icon, and border | Example message |
|---|---|---|---|
| Success | #EDF8F1 | #166534 | ✓ Import successful: Inventory CSV imported |
| Warning | #FFF4D8 | #765002 | ! Check required: One day until the deadline |
| Error | #FDEDED | #A12634 | × Import failed: Check the required columns |
For Success, pale green #EDF8F1 behind dark green #166534 produces a text contrast ratio of approximately 6.55:1. Warning uses pale amber #FFF4D8 with dark brown #765002 for approximately 6.57:1. Error uses pale red #FDEDED with dark red #A12634 for approximately 6.51:1. These values come from the actual foreground and background pairs; the names of the colors alone cannot establish readability.
The pale fills differ from the surrounding white #FFFFFF by only approximately 1.09–1.13:1. That is too subtle to rely on as an essential visual boundary, so use the darker status color for the panel’s border too. Compared with the surrounding white #FFFFFF, the Success outline #166534 has a ratio of approximately 7.13:1, the Warning outline #765002 approximately 7.20:1, and the Error outline #A12634 approximately 7.39:1. The result is a distinguishable outline without turning the entire panel into a saturated block of color.
Keep the same meanings when these colors appear in a notification panel, a short status label, or a detail view. Adapt the wording to the task, however: Success should name the data actually imported, Warning should identify the deadline or item needing review, and Error should point to a correction such as checking required CSV columns. The text, not the hue alone, must convey what happened.
Do not depend on color alone, and update messages with the real state
WCAG (Web Content Accessibility Guidelines) 2.2 requires that color not be the sole way information is conveyed. Combine labels and shapes—for example, “✓ Success,” “! Check required,” and “× Error”—with the palette. For detected input errors, identify the affected field or item and describe the error in text.
At WCAG 2.2 Level AA, normal text requires at least 4.5:1 contrast against its background, while qualifying large text requires at least 3:1. Meaningful icons and visual information required to identify user-interface controls and their states generally require 3:1 against adjacent colors. The ratios above are calculations for opaque solid-color pairs, not evidence that an entire page conforms to WCAG.
A stale success message can mislead users after the process changes, so keep the message synchronized with the actual result. Also distinguish Error from destructive actions such as Delete, and recheck foreground/background combinations if the product offers a dark mode.
HueRoll lets you enter HEX codes, explore tints and shades, and inspect contrast against white and black. It does not compare arbitrary pairs of custom colors or automatically determine AA/AAA conformance. Use another method to check combinations such as the pale backgrounds and dark status text used in these examples.