How to Create a Color System with Consistent Lightness and WCAG Contrast Using Accessible Palette

Accessible Palette builds color scales in the CIELAB and LCh color models instead of HSL, so each step from 50 to 900 keeps a predictable lightness and reports its WCAG 2 and WCAG 3 contrast values. Use it when you need a design-system palette where text and background pairings can be checked against accessibility targets rather than eyeballed. You set one or more starting colors by their L, C, and H values, and the tool generates the full ramp with contrast numbers attached to every step.

What the tool actually produces

The output is a set of numbered stops (50, 100, 200 … 900) for each starting color. Every stop carries three pieces of data:

• L, C, H — the CIELAB/LCh coordinates used to generate that step
• Hex value — the color you copy into your design tokens
• WCAG 2 and WCAG 3 contrast ratios — measured against a reference, so you can see at a glance which steps are usable for text

From the page evidence, a red-family ramp runs like this:

The pattern repeats across the yellow, green, and blue ramps shown on the page: lightness decreases steadily as the stop number rises, and contrast increases with it. That consistency is the point — stop 600 lands near the 4.5:1 threshold in the red, yellow, and green examples, which is the WCAG 2 AA minimum for normal text.

Step-by-step: building a ramp

1. Set a starting color. Enter its L, C, and H values in the CIELAB/LCh fields. If you already have a brand hex, you'll need its Lab/LCh equivalent first — the tool works in these models, not in RGB or HSL.
2. Add the color to the system. You can add multiple starting colors to build a multi-hue palette side by side.
3. Read the generated scale. The tool fills in stops 50 through 900 with hex values and both WCAG columns.
4. Adjust the hue range if needed. The "Shift color range Hue" control lets you nudge the hue across the ramp, so you can warm or cool the darker stops without breaking the lightness progression.
5. Pick your pairings. Match a light stop as background against a dark stop as text, and use the WCAG column to confirm the ratio clears your target (4.5:1 for normal text, 3:1 for large text under WCAG 2 AA).

Reading the two WCAG columns

The page shows both WCAG 2 and WCAG 3 numbers for every stop, and they don't move in lockstep. In the red ramp, stop 100 reads 1.1 under WCAG 2 but 7 under WCAG 3; stop 900 reads 11.7 and 96. The two scales use different formulas, so a color that fails one target may pass the other. Decide which standard your project must meet before you select stops, and read the matching column.

A practical rule from the data: if you need WCAG 2 AA for body text, stops 600 and darker are where the red, yellow, and green ramps cross 4.5:1. Blue behaves differently — the excerpt cuts off mid-ramp, so verify the blue column yourself rather than assuming it matches.

Why the tool avoids HSL

The page's own heading is blunt: "Stop using HSL for color systems!" The reason is that HSL lightness is not perceptual lightness. Two HSL colors with the same L value can look very different in brightness, so an HSL-generated ramp produces uneven steps and unpredictable contrast. CIELAB and LCh are designed around human perception, which is why the Accessible Palette ramps hold a steady visual progression and why the contrast numbers climb in an orderly way.

Common snags

• You have hex, not LCh. Convert first. The tool's inputs are L, C, and H, so a raw hex code won't go straight in.
• Assuming one stop fits all text sizes. A stop at 4.8:1 passes AA for normal text but you may want more headroom for small or thin type.
• Treating the two WCAG columns as interchangeable. They aren't — check which one your accessibility requirement references.
• Forgetting the hue shift affects the whole ramp. Changing hue moves every stop, so re-check your chosen pairings afterward.

When this workflow fits

Use Accessible Palette when you're defining a design-system palette from scratch and accessibility contrast is a hard requirement, or when you need to prove that your color steps are perceptually even. If you only need a handful of one-off accessible color pairs, a contrast checker alone may be faster. If your brand colors are fixed and you can't move them in LCh space, the tool will show you which pairings pass but won't rescue a palette that has no accessible combinations.