Colour in UI Design: Principles and Process
Colour is one of the most powerful tools in visual design — and one of the easiest to misuse. This article explains how we approach colour decisions in your digital product.
The Colour System
We define a colour system, not just individual colours:
- Brand colours: Your primary brand colour(s) — used for key actions, links, and brand accents
- Neutrals: A scale from near-white to near-black for backgrounds, text, borders, and subtle UI elements
- Semantic colours: Success (green), warning (amber/yellow), error (red), and info (blue) — used consistently for status indicators across the product
- Surface colours: Background colours for cards, modals, sidebars — creating depth and separation
Colour Accessibility
Colour must never be the sole means of conveying information. A user who is colour-blind should be able to use your product without issue. We test all colour usage for:
- Contrast ratios (minimum 4.5:1 for text on WCAG 2.1 AA)
- Colour blindness simulation (deuteranopia, protanopia, tritanopia)
Dark Mode
If your product requires dark mode, it is not simply inverting colours. Dark mode requires a complete alternative colour palette — one that maintains contrast and hierarchy while reducing eye strain in low-light environments. We design dark mode as a separate colour system, not a filter.