The factor about contrast-color | CSS-Tips

One in every of our favorites, Andy Clarke, on the one factor preserving the CSS contrast-color() perform 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 degree for accessibility issues.

However right here’s the factor. The contrast-color() perform chooses both white for darkish backgrounds or black for gentle ones. A minimum of to my eyes, that distinction is just too excessive and makes studying much less snug, no less than 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 some other coloration, whereas providing essentially the most distinction, will not be the very best distinction ratio total.

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 do 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() help 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 coloration.

I’m positive it’s a type of issues that ‘s simpler stated than achieved, 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 have in mind, too. After which it will get into weeds of work being achieved on WCAG 3.0, which Danny does a pleasant job summarizing in a latest article detailing the shortcomings of contrast-color().

Direct Hyperlink →