I’m glad you showed the red/black red/white issue there and would like to know a bit more about the…

That’s definitely an interesting angle. Tone/hue/saturation translates roughly to the HSL color space we can use on the web. The red in the example I showed is hsl(0, 100%, 63%), which means it’s right in the middle of the “red” hue range (not orange-y or violet-y), it’s at 100% saturation, and 63% lightness (100% = white). If I turn the saturation down to 0% I get—like you say—a lightish grey.

Thing is if I use that as a background, it’s actually true that black text has better contrast, since the background is on the lighter side of the scale.

The weird part is it’s the hue that makes the difference: now if I turn the saturation back to 100%, white appears perceptually to have better contrast, even though the WCAG algorithm doesn’t agree. This suggests that WCAG is not weighting the hue part enough in its calculation—but I haven’t done enough research to say that for sure.

Like what you read? Give Ryan Frederick a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.