What is Accessible Palette?

Accessible Palette is a browser-based tool for building color systems using the CIELAB and LCh color models instead of HSL. It generates color scales with consistent lightness steps and shows the WCAG contrast ratio for each step, so you can pick colors that meet accessibility targets before you write any CSS. It's useful if you're defining a design system palette and need predictable contrast across light and dark shades.

What problem it solves

HSL is convenient but perceptually uneven: two colors with the same L value can look very different in brightness, and a lightness ramp built in HSL often produces steps that jump in contrast. Accessible Palette works in CIELAB/LCh, where lightness is designed to track human perception more closely, so a ramp from 50 to 900 stays visually even.

The tool's own framing is blunt about this: one of its section headings is "Stop using HSL for color systems!"

How the tool is organized

The interface has three working areas:

• Set starting colors — you enter colors as L, C, H values in CIELAB or LCh, or add a color and let the tool derive the ramp.
• Lightness & WCAG Contrast — a numbered scale (50 through 900) where each step shows its L value, hex code, and both WCAG 2 and WCAG 3 contrast numbers.
• Shift color range Hue — adjust the hue across the ramp.

Reading the contrast output

Each step in the scale reports two contrast figures. From the published example data:

The practical takeaway: steps 600 and 700 land near the WCAG 2 thresholds you'd normally care about (4.5:1 for normal text, 3:1 for large text and UI components), while 800 and 900 give you high-contrast options for text on light backgrounds. The WCAG 3 column uses a different scale (roughly 0–100), so don't compare the two columns directly.

What the L, C, H values mean

Each swatch is defined by three numbers:

• L (lightness) — runs from about 98 at step 50 down to about 23.5 at step 900 in the sample ramps.
• C (chroma) — saturation-like intensity; it typically peaks in the mid-range and drops at both ends so very light and very dark colors don't look muddy.
• H (hue) — the color angle, held roughly constant across a ramp (for example, the red ramp stays near H 32–35).

Because L is fixed per step across every hue, a red 500 and a blue 500 share the same lightness — which is what makes multi-hue systems feel balanced.

When to use it

Use Accessible Palette when you need a full tint/shade scale per brand color and want contrast compliance built in from the start. It's less suited to one-off color picking — for a single button color, a contrast checker is faster.

A reasonable workflow: pick your brand hue, generate the ramp, then assign steps to roles (background, surface, border, text) based on the contrast numbers rather than by eye. Verify the final pairings in your actual UI, since contrast depends on the specific foreground/background combination, not the swatch alone.