5 min read
2026-02-07
Minimum text contrast according to WCAG 2.1: 4.5:1 for regular text and 3:1 for large text.
HSL makes it easy to create color variations by changing only the lightness or saturation.
Determine primary, accent and neutral colors. For each, create a scale of 5–10 shades.
Store colors in CSS variables for easy theme changes and dark mode support.
About 8% of men have color vision impairment. Don't rely on color alone to convey information.
The oklch format provides perceptually uniform colors and a wide range of color space.
Too many colors create visual chaos. Limit yourself to 3-5 primary colors.
Colors look different on different monitors. Test on multiple devices.
See also: Flexbox Playground, Grid Playground, CSS Minifier