This content originally appeared on CSS-Tricks and was authored by Geoff Graham
One of our favorites, Andy Clarke, on the one thing keeping the CSS contrast-color() function from true glory:
For my website design, I chose a dark blue background colour (
#212E45) and light text (#d3d5da). This colour is off-white to soften the contrast between background and foreground colours, while maintaining a decent level for accessibility considerations.But here’s the thing. The
contrast-color()function chooses either white for dark backgrounds or black for light ones. At least to my eyes, that contrast is too high and makes reading less comfortable, at least for me.
Word. White and black are two very safe colors to create contrast with another color value. But the amount of contrast between a solid white/black and any other color, while offering the most contrast, may not be the best contrast ratio overall.
This was true when added a dark color scheme to my personal website. The contrast between the background color, a dark blue (hsl(238.2 53.1% 12.5%), and solid white (#fff) was too jarring for me.
To tone that down, I’d want something a little less opaque than what, say hsl(100 100% 100% / .8), or 20% lighter than white. Can’t do that with contrast-color(), though. That’s why I reach for light-dark() instead:
body {
color: light-dark(hsl(238.2 53.1% 12.5%), hsl(100 100% 100% / .8));
}
Will contrast-color() support more than a black/white duo in the future? The spec says yes:
Future versions of this specification are expected to introduce more control over both the contrast algorithm(s) used, the use cases, as well as the returned color.
I’m sure it’s one of those things that ‘s easier said than done, as the “right” amount of contrast is more nuanced than simply saying it’s a ratio of 4.5:1. There are user preferences to take into account, too. And then it gets into weeds of work being done on WCAG 3.0, which Danny does a nice job summarizing in a recent article detailing the shortcomings of contrast-color().
The thing about contrast-color originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
This content originally appeared on CSS-Tricks and was authored by Geoff Graham
Geoff Graham | Sciencx (2025-10-08T14:52:58+00:00) The thing about contrast-color. Retrieved from https://www.scien.cx/2025/10/08/the-thing-about-contrast-color/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.