How should a design system choose its error, warning and success colours?

Four hues with fixed meanings

Almost every interface system uses red for errors or danger, amber or orange for warnings, green for success and blue for neutral information. These are design conventions shared with traffic signals and industrial signage rather than laws of perception, but users have learned them, so a system that uses green for errors pays a real cost. The conventions also create a problem: red and green, the two most important statuses, are the pair a red–green colour-vision deficiency is most likely to confuse, and they tend to have similar lightness. A status palette therefore has to be designed as a set, checked against itself and against the surfaces it will appear on in every mode.

What the common defaults actually measure

The table measures CSS named status colours and Material-style defaults on white and on a #121212 dark surface. Pure CSS red is exactly at the 4:1 point on white: fine for icons and large text, not for body text. CSS orange and Material-style amber fall under 3:1 on white — they cannot even carry an icon or border there — but are among the best colours on dark. Material-style success green passes 3:1 on white but not 4.5:1, while its error red passes 4.5:1 on white but only 3:1-plus on dark. Pure blue flips the other way: excellent on white, failing on dark. No single hex value per status works in both modes; each status needs at least a light-mode and a dark-mode value.

The warning problem

Warnings are conventionally yellow or amber because those hues are conspicuous — on signage, bright yellow against black is the most visible combination. On a white screen, the same property works against them: a colour light enough to read as 'yellow' has too little luminance difference from white. The usual solutions are to make warning text a dark amber-brown (which passes but reads less clearly as 'warning'), to put dark text on a yellow or amber background banner, or to rely on the icon and label for meaning and use amber only in large fills. The second is the most robust: dark text on a pale amber fill keeps the warning association and passes contrast easily.

Structuring the status tokens

A practical status family has four tokens per status: status-danger-text (strong, 4.5:1 on the page surface), status-danger-icon (can be the same, needs 3:1), status-danger-surface (a pale tint for banners and inline messages) and status-danger-border. The text token must also be checked against the pale surface token, since error messages sit inside error banners. Each status should ship with an icon glyph in the component, not as an optional extra, because WCAG 1.4.1 does not allow colour alone to convey the status and because the icon is what distinguishes success from error for someone who cannot tell the greens from the reds. How forms use these tokens is covered in the accessibility guides.

The data

What goes wrong, and what to do

How to check it yourself

1. Put all status colours and both surfaces into the accessibility palette checker.
2. Check each status text token against its own pale surface token as well as the page.
3. Preview the status set under deuteranopia in the colour-vision deficiency simulator.

What the evidence says

Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.

• Colourwise analysisStrong evidence

  Pure CSS red (#FF0000) has a WCAG contrast just under 4:1 on white; CSS orange (#FFA500) has under 2:1 on white but over 9:1 on #121212; CSS blue (#0000FF) passes 8.5:1 on white but falls under 2.2:1 on #121212.

  Based on: Computed by Colourwise with the WCAG 2.2 contrast formula from CSS Color 4 named-colour values; see the table.

  Source: CSS Color Module Level 4; Web Content Accessibility Guidelines (WCAG) 2.2

• StandardStrong evidence

  WCAG 2.2 criterion 1.4.1 does not permit colour to be the only visual means of conveying information such as a status.

  Source: Web Content Accessibility Guidelines (WCAG) 2.2; Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2)

• ConventionModerate evidence

  Red for danger, yellow or amber for warning and green for safe or success are shared conventions in safety signage and interfaces, not perceptual necessities, and their meanings differ between cultures.

  Source: Human Interface Guidelines: Color; International Organization for Standardization (ISO) catalogue

Related questions

Why is it so hard to make a yellow warning colour accessible?

Yellow is only recognisably yellow when it is light, and light colours have little contrast with white. Dark text on a yellow or amber background keeps the association and passes easily.

Should information messages be blue?

Blue is the common convention and works well on white. It needs a lighter value in dark mode, because dark blues fall below 3:1 against near-black surfaces.

Do status colours need to differ from the brand colour?

They should, especially if the brand is red or green. Otherwise every brand accent can be read as an error or success, and status messages lose their force.

Related topics

Go further

Sources

• CSS Color Module Level 4 — W3C (World Wide Web Consortium) (Official standard or government)
• Web Content Accessibility Guidelines (WCAG) 2.2 — W3C Web Accessibility Initiative (WAI) (Official standard or government)
• Understanding Success Criterion 1.4.1: Use of Color (WCAG 2.2) — W3C Web Accessibility Initiative (Standards body)
• Human Interface Guidelines: Color — Apple (Manufacturer technical documentation)
• International Organization for Standardization (ISO) catalogue — ISO (Standards body)

Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.