Considered one of our favorites, Andy Clarke, on the one factor retaining the CSS contrast-color() operate from true glory:
For my web site design, I selected a darkish blue background color (
#212E45) and lightweight textual content (#d3d5da). This color is off-white to melt the distinction between background and foreground colors, whereas sustaining an honest stage for accessibility concerns.However right here’s the factor. The
contrast-color()operate chooses both white for darkish backgrounds or black for mild ones. No less than to my eyes, that distinction is just too excessive and makes studying much less comfy, a minimum of for me.
Phrase. White and black are two very protected colours to create distinction with one other coloration worth. However the quantity of distinction between a stable white/black and another coloration, whereas providing essentially the most distinction, might not be the most effective distinction ratio general.
This was true when added a darkish coloration scheme to my private web site. The distinction between the background coloration, a darkish blue (hsl(238.2 53.1% 12.5%), and stable white (#fff) was too jarring for me.
To tone that down, I’d need one thing rather less opaque than what, say hsl(100 100% 100% / .8), or 20% lighter than white. Can’t try this with contrast-color(), although. That’s why I attain for light-dark() as an alternative:
physique {
coloration: light-dark(hsl(238.2 53.1% 12.5%), hsl(100 100% 100% / .8));
}
Will contrast-color() assist greater than a black/white duo sooner or later? The spec says sure:
Future variations of this specification are anticipated to introduce extra management over each the distinction algorithm(s) used, the use instances, in addition to the returned coloration.
I’m certain it’s a kind of issues that ‘s simpler mentioned than accomplished, because the “proper” quantity of distinction is extra nuanced than merely saying it’s a ratio of 4.5:1. There are person preferences to keep in mind, too. After which it will get into weeds of work being accomplished on WCAG 3.0, which Danny does a pleasant job summarizing in a latest article detailing the shortcomings of contrast-color().
