Skip to main content
UI/UX foundations critical

Color Systems Best Practices

Color contrast, OKLCH color space, semantic tokens, dark mode, and accessibility guidelines based on WCAG 2.2, Apple HIG, and Material Design 3.

Difficulty
intermediate
Read time
1 min read
Version
v1.0.0
Confidence
established
Last updated

Quick Reference

Use semantic color tokens (--color-primary, --color-error) not raw values. WCAG contrast: 4.5:1 for text, 3:1 for UI components. Use OKLCH for perceptually uniform palettes. Support dark mode with prefers-color-scheme and CSS variables.

Use When

  • Setting up a color palette for a new project
  • Creating design tokens for colors
  • Checking or fixing color contrast issues
  • Implementing dark mode
  • Generating color variations programmatically

Skip When

  • Working with photography or image editing
  • Brand colors already strictly defined by client

Color Systems Best Practices

Color contrast, OKLCH color space, semantic tokens, dark mode, and accessibility guidelines based on WCAG 2.2, Apple HIG, and Material Design 3.

Tags

colors accessibility wcag contrast oklch dark-mode design-tokens

Discussion