accessiblepalette.com

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.

Accessible Palette uses CIELAB and LCh as the underlying color models for building color systems with consistent lightness and WCAG contrast ratios. CIELAB is a perceptually uniform color space where L represents lightness, and a and b represent the two chroma axes (green–red and blue–yellow). LCh is the cylindrical representation of the same space: L for lightness, C for chroma, and H for hue. In Accessible Palette, each color stop is defined by L, C, and H values, and the tool maps those values to hex codes and WCAG 2 / WCAG 3 contrast scores.

CIELAB vs. LCh: the same data, two shapes

CIELAB and LCh describe the same colors; they just use different coordinate systems.

Because LCh is CIELAB converted to polar coordinates, changing H rotates the hue without touching lightness, and changing C adjusts saturation without shifting hue. That independence is what makes LCh practical for generating a color ramp.

Why Accessible Palette uses these models

The page's section heading "Stop using HSL for color systems!" points to the core problem: HSL's lightness value does not match perceived lightness. Two HSL colors with the same L can look very different in brightness, so a ramp built in HSL produces uneven steps and unpredictable contrast.

CIELAB and LCh are designed to be perceptually uniform, so equal steps in L look like equal steps in brightness. Accessible Palette exploits this by holding L constant across a ramp while varying C and H, which is why the generated stops show a smooth, predictable progression of WCAG contrast values.

Reading the L, C, H values in Accessible Palette

Each swatch in the tool displays its L, C, H coordinates alongside the hex code and contrast scores. For example, from the page's red ramp:

• L: 98.2 C: 2.4 H: 19.5 → #FFF8F8, WCAG 2: 1, WCAG 3: 0
• L: 57.8 C: 59.1 H: 35.2 → #E26352, WCAG 2: 3.4, WCAG 3: 61
• L: 23.55 C: 28.3 H: 33.2 → #5D2822, WCAG 2: 11.7, WCAG 3: 96

Notice that H stays near 33–35 across the entire red ramp. Only L and C change. That is the LCh model at work: hue is held constant so the ramp stays recognizably "red" from the lightest tint to the darkest shade.

The same pattern appears in the yellow ramp (H ≈ 80–96), the green ramp (H ≈ 140–145), and the blue ramp (H ≈ 230–256). Each ramp keeps its hue angle stable while L drops from ~98 to ~23 and C rises then falls.

How L maps to WCAG contrast

The tool pairs each L value with contrast scores, which makes the relationship between perceptual lightness and accessibility measurable. From the page's data:

Two things stand out. First, WCAG 2 contrast crosses the common 4.5:1 threshold around stop 600 (L ≈ 47.6). Second, WCAG 3 scores rise much faster at the light end — stop 100 already scores 7 — because the WCAG 3 model weights lightness differently. This is why the tool shows both: a palette that passes WCAG 2 at a given stop may score very differently under WCAG 3.

Practical implications for building a palette

• Hold H constant to keep a ramp on-hue. If you shift H while changing L, the ramp drifts toward a neighboring color.
• Use L to target contrast. If you need a 4.5:1 text color on white, pick a stop with L around 47–48 or lower.
• Adjust C to control vividness without affecting contrast, since chroma does not change the L value that drives the contrast score.
• Don't assume HSL L equals CIELAB L. A color that looks "50% lightness" in HSL may sit at a very different CIELAB L, which is why the tool's contrast predictions differ from what you'd get from an HSL-based generator.

In short, CIELAB gives Accessible Palette a perceptually uniform numeric space, and LCh gives it an intuitive handle (L, C, H) for building ramps where lightness — and therefore contrast — changes in a controlled, predictable way.

HSL is a convenient way to describe a color, but it is a poor coordinate system for building a color system. Accessible Palette's warning comes down to one property: HSL is not perceptually uniform. When you move the L slider in HSL, the color does not get uniformly lighter or darker to the human eye, and its hue and saturation appear to shift along the way. That makes it hard to produce a ramp of colors with predictable, evenly spaced contrast — exactly what you need for accessible UI palettes. Accessible Palette instead builds ramps in CIELAB and LCh, which are designed to be perceptually uniform.

The core problem: HSL's "L" is not perceived lightness

In HSL, L is a mathematical lightness value, not a measure of how light a color looks. Two colors with the same HSL L can look very different in brightness, and a single hue at a fixed saturation will not step evenly through perceived lightness as you change L.

A few consequences:

• Hue drift. As you raise or lower L in HSL, the apparent hue of a color can shift. A "blue" ramp built in HSL may look purple at the dark end and cyan at the light end.
• Saturation distortion. Perceived saturation changes as L changes, so a ramp that looks evenly saturated in HSL terms does not look evenly saturated to the eye.
• Uneven contrast steps. Because perceived lightness does not track HSL L linearly, the WCAG contrast ratios between adjacent steps come out irregular — some steps jump, others barely move.

Why this breaks accessible color systems

An accessible color system usually needs a ramp like 50, 100, 200 … 900 where each step is a predictable distance from the next, and where specific steps hit specific contrast targets against a background. If your underlying space is not perceptually uniform, you end up hand-tuning every swatch: nudging hue, correcting saturation, and re-checking contrast ratios one by one. The system stops being systematic.

Accessible Palette's own example ramps show what a uniform space buys you. In its red ramp, the steps are labeled with both CIELAB lightness and WCAG contrast:

Notice how lightness decreases in even perceptual increments while contrast rises in a controlled way — the 600 step lands at roughly 4.8, near the WCAG AA threshold for normal text. That kind of alignment is what you are trying to engineer, and it is much easier when the color space itself behaves uniformly.

What CIELAB and LCh give you instead

CIELAB (and its cylindrical form, LCh) are based on how humans actually perceive color differences:

• L* is perceptual lightness, so equal steps in L* look like equal steps in brightness.
• C* is chroma (colorfulness) and h is hue angle, so you can hold hue steady while adjusting lightness and chroma independently.
• Because the space is perceptually uniform, a ramp built along L* produces more even contrast spacing, making WCAG targets easier to hit deliberately rather than by trial and error.

Accessible Palette exposes exactly these controls — L, C, and H in CIELAB/LCh — and reports the WCAG 2 and WCAG 3 contrast values for each generated step, so you can see the contrast consequences of your lightness choices as you build.

Practical takeaway

• Use HSL for quick one-off colors or CSS tweaks where perceptual accuracy does not matter.
• Do not use HSL to generate a multi-step palette if you care about consistent perceived lightness or predictable WCAG contrast.
• Build ramps in a perceptually uniform space (CIELAB/LCh) so lightness steps are even and contrast targets are reachable by design.
• Verify the result against WCAG contrast ratios at the specific steps you will use for text and UI elements.

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.

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.