What are CIELAB and LCh color models in Accessible Palette?

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.