The thing about contrast-color • Stuff & Nonsense
October 16, 2025
I have to admit that I got a little over-excited when I read that the contrast-color() function is supported in Safari and was keen to try it out. But there’s a problem, the thing with contrast-color is…
As Juan writes on CSS Tricks:
Given a certain color value, contrast-color() returns either white or black, whichever produces a sharper contrast with that color. So, if we were to provide coral as the color value for a background, we can let the browser decide whether the text color is more contrasted with the background as either white or black.
So yeah, define a background colour and the browser will choose either black or white to contrast it with:
h1 { background-color: var(--color-background); color: contrast-color(var(--color-background)); }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.
We’ve covered contrast-color here recently, a relatively new CSS function that allows us to straightforwardly specify contrast in colour values To ensure we have contrast.
But this is relatively limited, as Andy Clarke observes in this article “define a background colour and the browser will choose either black or white to contrast it with”.
Here Andy explores the function and how we can work with it despite this apparent limitation.
Related Speakers
