Colour theory, palettes, contrast and semantic colour

Colour in interfaces has three jobs: communicate brand, create hierarchy and signal meaning. It is the most emotional design tool and also the easiest to misuse.

Hue, saturation and lightness

Hue is the colour family (red, blue, green). Saturation is how intense it is. Lightness is how close it is to white or black. For readability and contrast, lightness matters far more than hue: dark blue text on white is readable, light yellow is not, whatever the brand says.

A functional palette

A practical interface palette has three parts:

• Neutrals: greys (often slightly warm or cool) for text, borders, backgrounds and surfaces. Most of an interface is neutral.
• Primary (brand) colour: used sparingly for primary actions, links, selection and focus. Its power comes from scarcity.
• Semantic colours: green for success, amber for warning, red for errors or destructive actions, blue for information. Their meanings must stay consistent.

Each colour needs a range of shades, usually from very light (backgrounds) to very dark (text on light backgrounds). Many systems use numbered steps such as 50 to 900.

Roles, not colours

Instead of saying "this button is #1E40AF", say "this is the primary action colour", which happens to be a particular blue. Naming colours by role (text primary, text secondary, surface, border, action primary, danger) keeps usage consistent and makes changes, including dark themes, much easier. These role names become semantic design tokens later.

Contrast and colour independence

WCAG asks for at least 4.5:1 contrast for normal text, 3:1 for large text, and 3:1 for meaningful non-text elements such as icons, input borders and focus indicators. Separately, never use colour as the only way to communicate meaning. About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, and everyone struggles with colour in bright sunlight. Pair colour with text, icons or patterns.

A rule of thumb for proportion

A common starting heuristic is roughly 60% neutral background, 30% secondary surfaces and text, and 10% accent. It is not a law, but it reminds you that accents work because they are rare.

Colour mistakes are among the most common accessibility failures on the web, and they directly affect whether people can read text and understand states. Inconsistent semantic colours cause real errors: if red sometimes means "error" and sometimes "sale", people misread both. A role-based palette also makes products cheaper to maintain, because a brand refresh or a dark theme changes a handful of tokens instead of hundreds of screens.

A banking app uses its brand red for the logo, for "Transfer" buttons, for negative balances and for error messages. Customers hesitate before transferring money because the button looks like a warning, and some miss genuine errors because red is everywhere.

The team keeps red in the logo but introduces a dark blue for primary actions, reserves red strictly for errors and destructive actions, and shows negative balances with a minus sign and the word "overdrawn" in dark text, with red only as a supporting cue. Hesitation on the transfer screen drops in testing, and error messages become noticeable again.