Introduction
Color shapes first impressions, influences readability, and drives action. Applied intentionally, it clarifies hierarchy, reduces cognitive load, and improves conversion. Misused, it causes confusion and accessibility failures. This guide offers practical color tactics for product teams.
Core Color Associations
While context matters, these associations are broadly observed in interface design:
- Blue: trust, stability; common in fintech/SaaS. Avoid overuse to prevent cold tone.
- Green: success, confirmation, growth; ideal for success states and CTA affirmation.
- Red: errors, destructive actions; use sparingly for alerts and high-salience warnings.
- Orange/Yellow: attention, caution; effective for low-severity warnings or highlights.
- Purple: creativity, premium; works for brand accents and secondary CTAs.
Cultural Context
Color meaning varies across regions. If you serve multiple markets, validate palette choices with local users and avoid relying on color alone for critical signals.
Contrast & Legibility
Treat contrast as non‑negotiable. Minimums:
- Text under 18px/24px bold: 4.5:1 contrast ratio
- Large text or icons: 3:1
- Interactive states (hover/focus): visible, non‑color indicators
Semantic Color System
Define tokens that map to meaning, not hue names:
--color-text-primary,--color-text-secondary,--color-border--color-bg-surface,--color-bg-elevated--color-status-success,--color-status-warning,--color-status-error
Brand & CTA Strategy
Use one primary CTA color with sufficient contrast against surfaces and text. Reserve secondary/tertiary styles for lower hierarchy actions. Ensure states (hover/active/disabled) are perceptible in both light and dark modes.
Testing Checklist
- Validate contrast with automated tools (e.g., WebAIM).
- Check dark mode parity for tokens and semantic roles.
- Run quick user tests for CTA discoverability and emphasis.
Conclusion
Treat color as a semantic system that supports clarity and accessibility. Anchor decisions in contrast, consistent tokens, and cross‑cultural validation.