UI Color Systems

How to build consistent UI color systems. Primary, secondary, accent colors, semantic colors, and contrast requirements.

Color Roles

Primary colors represent your brand and main actions (buttons, links). Secondary colors support primary actions or represent secondary actions. Accent colors draw attention to important elements (notifications, highlights).

Semantic colors communicate meaning: success (green), error (red), warning (yellow), info (blue). These should be consistent across your UI to avoid user confusion.

Contrast Requirements

WCAG AA requires 4.5:1 contrast for normal text (under 18px) and 3:1 for large text (18px+ or 14px+ bold). All text on colored backgrounds must meet these ratios. This includes primary buttons, secondary buttons, and text on accent backgrounds.

Interactive elements (buttons, links) should have sufficient contrast for visibility. Hover states should maintain or improve contrast. Focus states need high contrast for keyboard navigation.

Color Harmony

Primary and secondary colors should be distinct enough to avoid confusion. Use hue separation (different hues) or saturation/lightness differences. Accent colors should stand out from primary and secondary.

Avoid using colors that are too similar. If primary and secondary are too close, users may not distinguish between them. Use color harmony principles (complementary, triadic, or analogous color schemes).

/* Brand colors */
--primary: #10b981;
--secondary: #06b6d4;
--accent: #8b5cf6;

/* Semantic colors */
--success: #10b981;
--error: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;

/* Neutral colors */
--background: #0f172a;
--foreground: #f1f5f9;
--muted: #1e293b;
--border: #334155;