One among our favorites, Andy Clarke, on the one factor preserving the CSS contrast-color() operate from true glory:
For my web site design, I selected a darkish blue background color (
#212E45) and light-weight 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 gentle ones. At the very least to my eyes, that distinction is just too excessive and makes studying much less comfy, at the least for me.
Phrase. White and black are two very secure colours to create distinction with one other colour worth. However the quantity of distinction between a strong white/black and some other colour, whereas providing probably the most distinction, is probably not the perfect distinction ratio total.
This was true when added a darkish colour scheme to my private web site. The distinction between the background colour, a darkish blue (hsl(238.2 53.1% 12.5%), and strong 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 do this with contrast-color(), although. That’s why I attain for light-dark() as an alternative:
physique {
colour: 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 circumstances, in addition to the returned colour.
I’m positive 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 consumer preferences to take into consideration, 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().
