Skip to content
Afordz

Module 09 · 25 min

Colour, contrast, and states

Colour guides attention. States tell people what they can do. Both must stay clear for everyone, including people who cannot rely on colour alone.

Design the states

Every control needs more than one look: default, hover or press, focus for keyboard, disabled, error, and success where it matters.

  • Focus — a clear ring or outline for keyboard users.
  • Error — text plus colour, not colour alone.
  • Disabled — clearly not clickable, not just pale.

Contrast and colour harmony

Check contrast so text stays readable. Colour harmony (complementary, analogous, or triadic) can help a palette feel calm, but contrast and meaning come first.