--- title: "LCH: Easier accessibility and prettier colors" description: "The lightness, chroma, hue color space was created to be perceptually uniform and easy for humans to work with. We used LCH to enhance the accessibility for accent colors within our design system." --- # LCH: Easier accessibility and prettier colors The lightness, chroma, hue color space was created to be perceptually uniform and easy for humans to work with. We used LCH to enhance the accessibility for accent colors within our design system. The lightness, chroma, hue color space was created to be perceptually uniform and easy for humans to work with. We used LCH to enhance the accessibility for accent colors within our design system. ## **Color spaces** Let's start with some terms: - **RGB (red, green, blue): **RGB colors look like `rgb(255, 128, 0)` or `#ff8000` - **HSL (hue, saturation, lightness): **HSL colors look like `hsl(180, 50%, 60%)` - **LCH (lightness, chroma, hue): **LCH colors look like `lch(50, 150, 180)` or `lch(50%, 100%, 220)` - **HSV (sometimes called HSB)** is similar to HSL. We will not be covering HSV in this post ## **What's wrong with RGB?** RGB colors are hard for humans to understand. We don't think of colors as being a mix of red, green, and blue light. Worse yet is manipulating RGB colors. There is no easy way to lighten/darken or saturate/desaturate an RGB color. Look at these sliders and try to make any sense of them: ## **What's wrong with HSL?** HSL is _much_ easier to use than RGB. However, it has a critical flaw: It's not _perceptually uniform_. Different hues will drastically change the perceived brightness for a given saturation and lightness. For accessibility compliance, [WCAG AA](https://www.w3.org/WAI/WCAG2AA-Conformance) requires a 4.5 contrast ratio for text. You must carefully adjust the saturation and lightness of each color _(hue_) in your palette. We did some code exploration of how to make our accent colors accessible. We initially used the HSL color space to darken app colors until they met the 4.5 ratio. HSL does an ok job of darkening colors for accessibility, but you can see that when we used LCH, I retained much more of the original saturation of the color. The HSL cards look dark and dull. ## **How do I use LCH?** - [LCH Color Picker Plugin for Figma](https://www.figma.com/community/plugin/969496279507778512/LCH) - [colord for JavaScript](https://www.npmjs.com/package/colord) - [Native lch() function in CSS (eventually)](https://caniuse.com/css-lch-lab) - [postcss plugin for lch()](https://github.com/csstools/postcss-lab-function) As of May 2023, `lch()` is supported in all browsers. To support older browsers you'll need to use a [CSS processor](https://github.com/csstools/postcss-lab-function) or convert colors manually. An example CSS LCH color looks like `lch(40 68.8 34.5)`. This color uses the new CSS Colors 4 syntax without commas and supports the new slash syntax for specifying the alpha channel:` lch(40 68.8 34.5 / 50%)`. You can explore LCH colors and convert them to RGB using the [LCH Colour Picker](https://css.land/lch/). Using colord, you can convert LCH colors to RGB colors: And then in a different file: You can even generate more accessible versions of existing colors: ## **Lossy conversion** LCH can represent colors outside the sRGB color space used by RGB and HSL colors in the browser. Many colors in LCH [can't be translated accurately to RGB](https://css.land/lch/). It's important to keep colors in LCH format as long as possible. And LCH must be implemented in CSS before non-SRGB colors in the browser. ## **LCH tradeoffs** You might be surprised to learn that with LCH colors, the _chroma_ and _lightness_ maximum values depend on the _hue_. In my experience, this isn't a huge issue, but it can be weird to get used to. If you exceed a parameter's range in LCH, its value is adjusted to the maximum. Also, the _hue_ in LCH is offset from the _hue_ in HSL. HSL's _hue_ starts at pure red, while LCH's _hue_ starts at pinkish red. So if you were attempting to convert HSL to LCH manually, your hues would get mixed up. ### Further reading - [**Color Combos**](https://color-combos.wavebeem.com/?fg=lch%28100%25+100%25+0%29%0Alch%28100%25+100%25+30%29%0Alch%28100%25+100%25+60%29%0Alch%28100%25+100%25+90%29%0Alch%28100%25+100%25+120%29%0Alch%28100%25+100%25+150%29%0Alch%28100%25+100%25+180%29%0Alch%28100%25+100%25+210%29%0Alch%28100%25+100%25+240%29%0Alch%28100%25+100%25+270%29%0Alch%28100%25+100%25+300%29%0Alch%28100%25+100%25+330%29%0Alch%28100%25+100%25+360%29&bg=%23222%0A%23333%0A%23444&group_by=background): A color contrast and combination website that supports LCH colors if[ your browser supports LCH colors](https://caniuse.com/css-lch-lab). Note that this site uses the WCAG color contrast algorithm, which isn't perceptually correct. The WCAG is considering switching to a perceptually correct contrast algorithm in a future release, enabling designers to pick colors that look better and are more accessible without automatic contrast-checking tools complaining about them. _**Note:**__ If your browser doesn't support LCH, you can use this_[_ URL to approximate the colors via hex codes_](https://color-combos.wavebeem.com/?fg=%23ff00ff%0A%23ff3579%0A%23ffb800%0A%23fffc00%0A%2382ff00%0A%2300ff51%0A%2300fffa%0A%2300ffff%0A%2300ffff%0A%2300ffff%0A%23ffccff%0A%23ff59ff%0A%23ff00ff&bg=%23222%0A%23333%0A%23444&group_by=background)_._ - [**Designing accessible color systems**](https://stripe.com/blog/accessible-color-systems)** by Stripe: **A great read on how Stripe used perceptually uniform color spaces to redesign their color palette for accessibility! This is where I originally learned about the CIELAB color space. - [**Perceptually uniform color spaces**](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/index.html)** by Programming Design Systems: **This article contains excellent information on color spaces with many great images.