It's a wild one
``` In this site, we want to make sure the text colour always has enough contrast to be legible—regardless of what our background colour is. We could, of course, check our colours on a contrast-test site but that is too much work. Let's instead use `color-contrast()`: ```css :root { /* a variable for the background colour*/ --bg-colour: navy; } body { background-color: var(--bg-colour); } /* selects both h1 and p elements*/ :is(h1, p) { color: color-contrast(var(--bg-colour) vs black, white); } ``` Let's see … Now, what does that last styling do? Well, `color-contrast()` is, simply put, a function that returns a colour. The returned colour is based on two things: the colour to compare contrast against and a set of colours to choose from. In this example, `--bg-colour`, or `navy`, is what to compare against, and `black` and `white` are the colours to chose from. The result is what you see below:  _Result from example code_ We can see our text is in a nice and contrasty white. And all this was done without us knowing if black or white had the most contrast againts navy. Great! ### AA level contrast against a palette In the previous example, the text colours to choose from was either black or white as this will always achieve the highest contrast level. However, in the real world you might need to follow a palette of colours while also achieveing [WCAG AA level contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum). Again, `color-contrast()` has us covered! Also this time, we have our simple site: ```htmlIt's a wild one
``` But this time, we want our background colour to randomly change on each load. Let's magically🪄 add some javascript to randomly set the background to either `navy`, `lightseagreen`, `orange` or `grey`. We also want our text colour to be `navy` or `lightseagreen`, as long as it doesn't violate AA-level contrast. To do this, we only need to change a few characters in our `:is(h1, p)` selector: ```css /* before */ :is(h1, p) { color: color-contrast(var(--bg-colour) vs black, white); } /* after */ :is(h1, p) { color: color-contrast(var(--bg-colour) vs navy, lightseagreen to AA);); } ``` This simple change does two things: It tells `color-contrast()` to pick between `navy` and `lightseagreen`, and, due to `to AA`, it also says the selected colour _needs_ to satisfy AA-level WCAG. Since `navy` and `lightseagreen` alone are not guaranteed to do this, this option also adds black and white as fallback colours. Pretty neat. You can see the result below. Each change happens when the page is reloaded:  _Results from the example_ ## Buuuut … Support isn't great 😅 Before you go out and implement this in your site I unfortunately need to tell you that this is still an experimental feature; at the moment of writing it's actually so experimental that only Safari supports it, and even there it is behind a feature flag. But, hopefully soon, more browser will add support, and testing text contrast might be a thing of the past! See [MDN Web Docs](https://developer.mozilla.org/docs/Web/CSS/color_value/color-contrast) for more information on how to enable it, and try it out with the links to the given examples! ### Links to examples [First example 🔗](https://codepen.io/magnusrand/pen/vYrZPBy)* [Second example 🔗](https://codepen.io/magnusrand/pen/ZERyVqy)* \* _You need Safari with the color-contrast() feature flag enabled to run this_ ## Relevant resources recommended by the author - [:has is here and you probably need it in your CSS](https://www.bekk.christmas/post/2022/8/has-is-here-and-you-probably-need-it-in-your-css): So, you've heard talk of a so-called :has() selector, but don't really know what it is. Or maybe you just clicked the article hoping to learn something new. Well, this article is for you! Now that :has() finally is supported by all major browsers, it is time to learn what it is, why you should care and how you use it.