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.