Colour and Contrast Systems

Colour systems shape readability every day — interfaces must stay understandable beyond colour alone.

01 — Purpose

Colour systems shape readability

Colour systems affect readability, usability, and accessibility constantly — interfaces must remain understandable beyond colour alone.

Contrast, semantic colour roles, and visible state distinction determine whether text is legible, errors are noticeable, and status is clear. A system that works in light mode but fails in dark mode — or on a phone in sunlight — is incomplete.

See design tokens and the accessibility standard for how colour fits the wider stack.

02 — Principles

Understandable beyond colour alone

Never rely on hue as the only signal for meaning or state.

  • sufficient contrast for text, icons, and interactive boundaries
  • semantic colour usage — error, success, warning with consistent roles
  • visible state distinction — focus, hover, active, disabled, selected
  • support for light and dark themes without sacrificing readability

03 — Practice

Good colour and contrast practice

Clarity first — decoration never wins over legibility.

  • meet WCAG contrast targets for body text and UI chrome — test both themes
  • pair colour with text, icons, or patterns for status — not colour alone
  • define tokens for text, surface, border, and accent — see design tokens
  • verify focus rings remain visible on every background you ship
  • test on real devices — outdoor glare and low brightness expose weak contrast fast

04 — Avoid

Colour that fights clarity

Low contrast and colour-only meaning exclude users every day.

  • colour-only meaning — red/green success without labels or icons
  • low-contrast text — grey on grey, thin weights on tinted backgrounds
  • decorative readability sacrifices — trendy palettes over legibility
  • inaccessible status indicators — dots or badges with no text alternative
  • assuming one theme is enough — ship and test both light and dark

05 — Close

Colour should support clarity

Contrast impacts readability, low-vision users, mobile usability, and cognitive load.

Audit palettes against real content — headings, links, form errors, disabled states — not just hero marketing blocks. If meaning disappears in greyscale or for colour-blind users, add a second channel.

See design tokens, cascade layers for theme structure, and the accessibility QA checklist before release.