---
title: Semantic Colour
slug: semantic-colour
kind: grammar
summary: Neutral is the default and colour is an exception that carries exactly one meaning — at most three semantic hues plus greys, and never colour on its own.
problem: >-
  Colour gets used for decoration, for identity, for status and for hierarchy at
  the same time, so a hue means different things in different places. At that
  point colour has stopped carrying information and is only costing attention.
family: [scan]
principles: [consistency, progressive-disclosure]
status: stable
visibility: public
related:
  - title: Color, Icons, and Contrast
    url: /cookbook/color-icons-and-contrast
    summary: The full authority on this — contrast floors, the channel rule, the entity palette. Read it before deciding anything.
  - title: Badge Soup
    url: /patterns/badge-soup
    summary: What happens when this budget is ignored.
---

> The authoritative version of these rules — including the contrast floors and
> the entity palette — is the **[Color, Icons, and
> Contrast](/cookbook/color-icons-and-contrast)** guide. This page is the
> catalog's summary of it, not a second source.

## The budget

**At most three semantic colours plus neutrals**, each with exactly one meaning,
written down:

| Colour | Means | Used for |
|---|---|---|
| **Amber** | a human must act, now | waiting, overdue, unsent, needs review |
| **Rose / red** | broken or destructive | errors, failures, delete |
| **Emerald** | moving the right way | positive deltas, success |
| **Blue** | interactive | links and buttons **only** — never a status |
| **Slate / grey** | everything informational | all other text, chips, borders |

If you cannot say in one short sentence what a colour means on this screen, make
it grey.

## The three rules that do the work

**1. Neutral by default.** Colour is preattentive — the eye spends it before
reading a word — which makes it powerful and strictly limited. Most facts on
most screens are informational, and informational is grey.

**2. One meaning per hue, product-wide.** A colour that means "draft" on one
screen and "re-opened" on another has stopped being information. This is the
rule that decays first, because each violation is introduced by a different
person on a different page.

**3. Never colour alone.** Every coloured thing carries a second channel — a
word, an icon, an arrow, a sign, or position. Print the page in greyscale: every
value must still read. This is not only an accessibility floor, though it is
that; it is also what makes the screen survive a screenshot in a document, a
projector, and a phone in sunlight.

## The channel rule

**Marks carry identity; text and icons carry status.** In a chart, colour
identifies the series. In a table, colour indicates that something needs
attention. Mixing the two — a status colour on a chart mark, an identity colour
on a badge — is a *channel collision*, and the reader cannot tell which system
is speaking.

## Contrast is part of the meaning

A colour that fails contrast has not conveyed anything. The floors: **4.5:1** for
normal text, **3:1** for large text, and **3:1** for icons, chart marks and
component boundaries that carry meaning. The last one is the one most often
broken — a pale grey bar on a white card fails, and a pastel status dot conveys
nothing to a substantial share of readers.

## The failure modes

- **Rainbow status.** Six hues at one saturation, some meaning two things.
- **Colour-only delta.** Green and red numbers with no arrow or sign.
- **Naked icon.** An icon with no label carrying meaning by itself.
- **Channel collision.** Status colour on identity marks, or the reverse.
- **Pastel marks** that fail the 3:1 floor and look deliberate.
- **Hue in the view.** Colours hard-coded into templates rather than named by
  role, so nobody can find or change the meaning later.

## The test

Squint at the screen. A well-coloured page shows a few points of colour exactly
where attention is needed, and grey everywhere else. Then take a greyscale
screenshot: if anything became unreadable or ambiguous, colour was carrying that
meaning alone.