Why OKLCH Lightness Should Be Avoided When Building UI Color Palettes

Although the "lightness" value in the OKLCH color space is a popular tool for generating wide color gamuts, it fails to accurately predict the contrast perceived by the human eye, which can lead to accessibility issues in design systems. According to technical analyses shared by UX Collective, rather than relying solely on the OKLCH lightness value when determining color palette weights, designers should use alternative metrics that directly calculate contrast.

The Core Problems Caused by OKLCH Lightness in Design

In modern web design, the OKLCH color model is frequently chosen because it is mathematically consistent. However, the lightness value in OKLCH fails to account for the fact that different hues, despite having the exact same lightness value, are perceived by the human eye at entirely different brightness levels.

For example, yellow and blue colors with the same OKLCH lightness value may fail to meet the contrast ratios required by WCAG (Web Content Accessibility Guidelines) standards when placed side by side or used in a text-to-background relationship. This causes color palette weights (such as shade scales from 100 to 900) to appear visually unbalanced and leads to overlooked accessibility errors, particularly during dark/light mode transitions.

Industry Implications and Alternative Approaches

When designing digital products, it is critical that color palettes are not only aesthetic but also functional and accessible. To improve the quality of the user experience, designers and developers should steer away from artificial lightness formulas when building color scales, opting instead for tools that directly account for real-time contrast measurement, such as APCA (Advanced Perceptual Contrast Algorithm) or WCAG 2.x ratios.

*This news report is based on data published by UX Collective.