Finding The Color Contrast of Colors Specified With the New CSS Color Functions

CSS has new color functions like LCH, LAB, HWB and the color() function. These new color function bring with them challenges for calculating contrast ratios for accessibility. Doesn’t help that the success criterions for color contrast are hard to understand.

Despite this, I have a hunch. In short, convert the color into XYZ and use the y component to calculate the contrast ratio as it corresponds to relative luminance. After all, that’s basically what the sRGB relative luminance calculation does.

I plan to go into much more detail in the future, where I’ll try to derive the formula for specific color spaces. If you reall yneed to figure it out now, go to the color JS notebook and use the code below to get the contrast ratio (switching with your own colors of course).

let c1 = new Color("white");
let c2 = new Color("lch(50% 50 50)");
c1.contrast(c2);

There is a proposed color contrast algorithm, but it’s still in development and once it’s done will need a lot of time implement. Given that, I won’t focus on how to check if you colors are accessible to that standard for now.