Color Theory for UI Design: Building Accessible Palettes

Color does more in an interface than make it look good. It guides attention, signals state, expresses brand personality and, when used badly, makes content unreadable. Good UI color is both an art and a system: a small, deliberate palette with clear roles, tested for contrast.

This guide covers the practical side of color theory for apps and websites.

The basics in a minute

• Hue is the color itself (red, blue, green)
• Saturation is how intense or muted it is
• Lightness (or value) is how light or dark it is

For interface design, lightness matters most, because contrast between text and background depends on it, not on hue.

Color harmony: starting points

Classic schemes give you reliable combinations:

Scheme	Idea	Effect
Monochromatic	Variations of one hue	Calm, cohesive, safe
Analogous	Neighbouring hues on the wheel	Harmonious, gentle
Complementary	Opposite hues	High energy, strong contrast
Triadic	Three evenly spaced hues	Playful, balanced if one dominates

Treat these as starting points. In practice, most UI palettes are one brand color, a neutral scale and a few functional colors.

Build the palette in roles

Instead of choosing colors by appearance, define them by purpose.

1. Primary: your brand color, used for key actions and highlights
2. Secondary / accent: used sparingly for emphasis or variety
3. Neutrals: a scale of greys (often 8 to 10 steps) for backgrounds, borders and text
4. Semantic colors: success (green), warning (amber), error (red) and information (blue)
5. Surfaces and overlays: background layers and elevation tones

Name them by role (color-text-primary, color-danger) so the system survives a rebrand. This is a core idea in a design system.

A useful guideline is the 60-30-10 rule: roughly 60 percent dominant neutral, 30 percent secondary, 10 percent accent. The accent draws the eye, so use it for what matters.

Contrast is non-negotiable

The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios:

• 4.5:1 for normal text
• 3:1 for large text (roughly 18 pt, or 14 pt bold)
• 3:1 for user interface components and meaningful graphics, such as input borders and icons

Check every text-and-background pairing, including text on buttons, placeholders, disabled states and text over images. Free tools such as WebAIM’s contrast checker or built-in features of design tools make this fast. See also accessibility basics.

Do not rely only on color to communicate meaning. A red border alone for an error is invisible to many people, so add an icon or text.

Create tints and shades systematically

Generate a scale for each key color, for example from 50 (lightest) to 900 (darkest). Pick steps for backgrounds, borders, hover states and text. A consistent scale makes it easier to maintain contrast and to build dark mode later. Tools such as Figma plugins, Tailwind’s palette generators or the OKLCH color space help create perceptually even steps.

Think about states

Interactive elements need visible state changes:

• Default, hover, pressed and focused
• Selected and disabled
• Error and success

Focus indicators in particular need strong contrast against both the element and the background so keyboard users can see where they are.

Color and emotion, with caution

Colors carry associations, but they vary by culture and context. Blue often suggests trust, green growth or success, red urgency or danger. Use these as hints rather than rules, and check how they read for your specific audience and market.

Plan for dark mode

Dark interfaces are not just inverted light ones.

• Use dark greys rather than pure black for large surfaces
• Reduce saturation of bright colors, which can vibrate on dark backgrounds
• Re-check contrast since ratios change
• Express elevation with lighter surfaces instead of heavy shadows

Our dark mode design guide goes into detail.

Test with real conditions

• Use simulators for color blindness (such as protanopia and deuteranopia) to ensure information is still clear
• View on different screens and brightness levels, including outdoors
• Check images and gradients under text
• Print in grayscale to confirm hierarchy relies on contrast, not hue alone

Common mistakes

• Using too many colors
• Low-contrast grey text on white
• Color as the only indicator of state
• Pure black on pure white for long text, which can feel harsh
• Bright accent colors used everywhere, so nothing stands out
• Forgetting disabled and focus states

Checklist

• Palette defined by roles, not just hues
• Neutral scale and semantic colors included
• Contrast ratios verified for every text pairing
• Meaning never conveyed by color alone
• States designed for all interactive components
• Dark mode palette planned
• Tested for color blindness and varied screens

Final thoughts

A good UI palette is small, purposeful and tested. Define roles, protect contrast and let color emphasise what matters. If you want help building a palette and design system for your product, see our UI/UX design service or contact us.