Color in UI Design: Rules for Palettes and Contrast

Color is one of the most powerful tools in interface design. It draws attention, communicates status, expresses brand, and creates hierarchy. It's also one of the easiest to misuse. Too many colors, poor contrast, or inconsistent meanings quickly make an interface confusing and inaccessible.

These rules help keep color purposeful.

1. Start with neutrals#

Most of an interface is neutral: backgrounds, surfaces, borders, and text. A well-crafted neutral palette does more for the overall feel of a product than any accent color.

Build a range of neutral shades from near-white to near-black. Consider a slight tint — cool grays for a technical feel, warm grays for a friendlier tone — that harmonizes with your brand color.

2. Use the 60-30-10 rule as a guide#

A classic balance from interior design works well for UI:

• 60% dominant neutral — backgrounds and large surfaces.
• 30% secondary — cards, panels, navigation, and supporting areas.
• 10% accent — primary actions, highlights, and key information.

It's a guideline, not a formula, but it prevents the common mistake of using the brand color everywhere until nothing stands out.

3. Build tonal palettes#

For each key color — primary, neutral, and each status color — create a range of tones from light to dark, often numbered from 50 to 900. This gives you options for backgrounds, borders, text, and interaction states while keeping everything in the same family.

Make the steps perceptually even, so each step feels like a consistent jump. Tools that work in perceptual color spaces like OKLCH make this much easier than adjusting hex values by eye.

4. Give every color a job#

Colors should carry consistent meaning:

• Primary — main actions and key interactive elements.
• Success — completed actions and positive states, usually green.
• Warning — caution and states that need attention, usually amber.
• Error — problems, destructive actions, and validation errors, usually red.
• Info — neutral information and tips, usually blue.

Once a color has a meaning, don't use it for something else. If red means error, a red decorative element will make users think something is wrong.

5. Use semantic tokens#

Name colors by role rather than appearance: "text/primary," "surface/raised," "action/primary," "status/error." Semantic tokens reference the raw palette and make it possible to change themes, support dark mode, or adjust the brand without hunting through every screen.

6. Meet contrast requirements#

Contrast is non-negotiable for readability and accessibility. Follow WCAG guidelines:

• 4.5:1 for normal body text.
• 3:1 for large text, around 24px regular or 18.5px bold and above.
• 3:1 for essential UI elements and graphics, like input borders, icons, and focus indicators.

Check contrast for every text and background pairing in your system, including text on colored buttons and status backgrounds. Many beautiful palettes fail here, especially with light grays and bright yellows.

7. Never rely on color alone#

Around one in twelve men and one in two hundred women have some form of color vision deficiency. If color is the only way to convey meaning, some users will miss it.

Always pair color with another signal:

• Errors get an icon and a message, not just a red border.
• Status badges include text labels.
• Charts use labels, patterns, or direct annotations as well as color.
• Links are distinguishable by underline or weight, not just color.

8. Design interaction states#

Interactive elements need visible states: default, hover, pressed, focused, disabled, and selected. Use your tonal palette to create these systematically — for example, one step darker for hover, two steps darker for pressed.

Focus states deserve special attention. They must be clearly visible for keyboard users, typically with a distinct outline or ring that contrasts with both the element and the background.

9. Use color to guide attention#

Color is a hierarchy tool. The most saturated, contrasting color on a screen should mark the most important action. If everything is colorful, nothing stands out. Keep secondary actions neutral and reserve the accent color for what matters most.

10. Design dark mode deliberately#

Dark mode isn't just inverted colors. A few rules help:

• Use dark grays rather than pure black for large surfaces to reduce harshness.
• Express elevation with lighter surfaces instead of shadows.
• Reduce saturation of bright colors, which can vibrate on dark backgrounds.
• Recheck contrast for every pairing — values that pass in light mode may not pass in dark mode.

Semantic tokens make dark mode far easier, because each role can map to different values per theme.

11. Test in context#

Colors behave differently depending on surroundings, screen quality, and lighting. Test palettes on real devices, in bright and dim environments, and with color blindness simulators. What looks subtle and elegant on a high-end monitor may disappear on a cheap phone in sunlight.

Color with purpose#

Good UI color isn't about having the most beautiful palette. It's about clarity: a calm neutral foundation, a few meaningful accents, consistent semantic roles, and contrast that works for everyone.

When every color has a job, users learn the system quickly — and the interface communicates without needing to explain itself.