HSL is an alternative representation of the RGB color model. It’s the most common way to specify color in design tools, but it has an inherent fault — Lightness and Saturation don’t reflect human perception. Compare blue and green — while both have a Lightness of 50, blue looks much darker.
This becomes a problem when building a color system with HSL, as lightness and contrast are inconsistent across color levels. Following contrast recommendations from Web Content Accessibility Guidelines is barely possible when every color pair needs to be checked individually.
Unlike the RGB, the CIELAB color model is designed to approximate human vision, and L component closely matches the human perception of lightness. It may be tricky to use it directly (just as RGB), but there are alternative representations like LCh (C is for Chroma) that work similarly to HSL.
In this color model, colors with the same specified Lightness have the same perceived lightness and WCAG contrast ratio. The same blue and green with Lightness of 50 look consistent and have a contrast ratio of 4.5:1 against white, meeting WCAG requirement.
This app uses the chroma.js library to generate color ranges with consistent lightness between levels. A few things to keep in mind:
All the “whys” and “hows” in a blog post: Accessible Palette: Stop using HSL for color systems