Color Theory & Palettes
Color is doing more communicative work than any other visual element — status, hierarchy, brand — often simultaneously.
4.2.1Definition
A color palette is a defined, limited set of colors — typically organized into primary/brand, neutral, and semantic (success/warning/error) groups — applied consistently across a product rather than chosen freely per screen. Color theory is the underlying discipline of how colors relate, contrast, and combine predictably.
4.2.2Why It Exists
Color is one of the fastest channels for a user to parse meaning — a red error state is recognized before the accompanying text is even read. This speed is only reliable if color usage is consistent; a palette exists to guarantee that a given color always means the same thing everywhere it appears, rather than becoming ambiguous through inconsistent use.
4.2.3Palette Structure
| Category | Purpose |
|---|---|
| Primary / Brand | Core identity color, used sparingly for emphasis and primary actions |
| Neutrals | Grays/blacks/whites forming the bulk of backgrounds, borders, and text |
| Semantic | Fixed meanings — success (green), warning (amber), error (red), info (blue) |
4.2.4Common Mistakes
- Using semantic colors inconsistently. Red meaning "error" on one screen and "featured/premium" on another, undermining the color's learned meaning.
- Insufficient contrast. Text or icons on backgrounds that fail WCAG contrast minimums (3.33), often discovered only in an accessibility audit rather than caught during design.
- Relying on color alone to convey meaning, with no secondary indicator for users with color vision deficiencies.
4.2.5Best Practices
- Reserve semantic colors exclusively for their semantic meaning — never repurpose them decoratively.
- Check contrast ratios during design, not after — retrofitting contrast fixes late is far more disruptive.
- Pair every color-coded meaning with a redundant signal (icon, text label, pattern).