Designing accessible color systems with OKLCH
OKLCH makes it dramatically easier to build palettes that meet WCAG contrast at every step. A practical workflow with formulas you can paste into Figma or CSS.
/* enabl OKLCH palette starter
Tweak --hue and the lightness ramp, then verify pairs against WCAG 1.4.3 / 1.4.11. */
:root {
--hue: 264; /* indigo */
--chroma: 0.16;
--c-50: oklch(98% 0.01 var(--hue));
--c-100: oklch(95% 0.03 var(--hue));
--c-200: oklch(90% 0.06 var(--hue));
--c-300: oklch(82% 0.10 var(--hue));
--c-400: oklch(72% 0.14 var(--hue));
--c-500: oklch(62% var(--chroma) var(--hue));
--c-600: oklch(54% var(--chroma) var(--hue));
--c-700: oklch(46% 0.14 var(--hue));
--c-800: oklch(36% 0.10 var(--hue));
--c-900: oklch(24% 0.06 var(--hue));
--c-950: oklch(15% 0.03 var(--hue));
…Downloadable guide
Preview the asset.
Skim the structure, then grab a copy you can edit, share, or paste into your team's docs.
OKLCH expresses color as Lightness, Chroma, and Hue in a perceptually uniform space. The headline benefit for accessibility: when you change L by a fixed amount, the perceived contrast change is roughly proportional. That's not true in HSL or RGB.
Why this matters for WCAG
WCAG 1.4.3 (text) requires 4.5:1; 1.4.11 (UI and graphics) requires 3:1. With OKLCH you can pick a hue family, fix chroma, and walk lightness in predictable steps — instead of eyeballing HEX values until contrast checks pass.
A 5-step workflow
- 01Pick your brand hue and a single chroma target. Most UI palettes live between 0.10 and 0.18.
- 02Generate an 11-step lightness ramp from ~98% down to ~15%.
- 03Pin two anchor pairs: body text (≥ 4.5:1) and primary action (≥ 4.5:1 on the chosen surface).
- 04Pull all other tokens — borders, muted text, focus rings — from neighbors of those anchors.
- 05Verify every pair you actually use. Don't trust the ramp; trust the contrast checker.
The starter file below is the exact base we use for client design systems. Adjust the hue, keep the chroma, and you've got a palette that's 80% of the way to WCAG AA.
Take it with you
OKLCH starter
Free to use and share with attribution.