How Accessible Palette Helps You Meet WCAG Contrast Requirements

Accessible Palette helps with WCAG contrast by building color scales in CIELAB and LCh instead of HSL, then showing the WCAG 2 and WCAG 3 contrast value next to every step of the scale. You pick a starting color, and the tool generates a ramp from 50 to 900 where each step has a defined lightness, so you can see at a glance which steps clear a given contrast threshold against white or black. This is useful if you are defining a design system palette and need text, borders, or backgrounds to pass WCAG checks without testing each color by hand.

What Accessible Palette actually does

The tool's stated purpose is to "create color systems with consistent lightness and contrast" using the CIELAB and LCh color models. Its interface starts with Set starting colors, where each color is defined by three values:

• L — lightness
• C — chroma (color intensity)
• H — hue

You can add multiple starting colors, and the tool expands each into a numbered scale (50, 100, 200 … 900). Alongside each step it prints the hex value plus two contrast readings: WCAG 2 and WCAG 3.

How the contrast values are presented

Each step in a generated scale carries its own contrast number. Using the red starting color from the site's example, the scale reads:

Two things are worth noticing here:

• The WCAG 2 column is the familiar ratio used by WCAG 2.x success criteria (for example, 4.5:1 for normal text). In this scale, step 600 reaches 4.8 and step 700 reaches 6.3 — so those are the steps that clear the common 4.5:1 threshold against white.
• The WCAG 3 column uses a different scale (0–100), reflecting the newer contrast method rather than the 2.x ratio. Values like 61, 73, and 81 are not ratios and should not be read as such.

The same pattern holds across the other example hues (yellow, green, blue): contrast rises as the step number increases, because lightness decreases.

Why the color model matters for contrast control

The site's heading "Stop using HSL for color systems!" points at the core problem. HSL lightness is not perceptually uniform — two colors with the same HSL lightness can look very different in brightness, so a scale built in HSL does not produce even contrast steps.

CIELAB and LCh are designed to be perceptually uniform. In practice this means:

• A fixed L value corresponds to roughly the same perceived lightness across different hues.
• Changing H (hue) while holding L and C keeps the color at a comparable lightness, so contrast stays predictable.
• You can therefore target a contrast level by choosing a lightness step, rather than guessing and re-testing.

The tool exposes this directly: the Shift color range Hue control lets you rotate hue while the lightness structure of the scale is preserved.

How to use it for a WCAG-compliant palette

1. Add a starting color by setting its L, C, and H values (or by adding a color and adjusting from there).
2. Let the tool generate the 50–900 scale. Each step gets a fixed lightness, so the ramp is even.
3. Read the WCAG 2 column to find which steps meet your target ratio. For normal body text against white, look for steps at or above 4.5; for large text or non-text UI, the lower thresholds apply.
4. Check the WCAG 3 column if you are working toward the newer standard, remembering it is a 0–100 score, not a ratio.
5. Adjust hue with the Shift color range Hue control if you need a different color family, then re-read the contrast values — the lightness structure, and therefore the contrast pattern, stays consistent.

What to keep in mind

• The contrast values shown are for the color against a reference (the example values align with white/light backgrounds). Contrast is always a relationship between two colors, so verify the actual foreground/background pair you ship.
• WCAG 2 and WCAG 3 numbers are not interchangeable. A "73" in the WCAG 3 column is not "73:1."
• The tool is a palette builder, not a full accessibility audit. It gives you contrast-aware color steps; you still apply them to real text sizes and UI states.

If your goal is a design system where every step has a known, even contrast relationship, building the scale in CIELAB/LCh and reading the per-step WCAG values is the workflow Accessible Palette is built around.