The color-contrast() function

As interesting as the color-mix() function is, it’s not something I can think of immediate use cases for.

However, the color-contrast() function is different. The color-contrast() function lets you specify a color, then at least another two colors, to effectively compete for the title of “Most Contrasting Color.” That’s not a real thing by the way, but it does mean a huge difference to day-to-day life as a developer trying to ensure you create suitably contrasting sites for accessibility. Let’s take a look at some examples.

This first example of color-contrast is the 11th swatch in our example file:

.header-text {
    background-color: #333;
    color: color-contrast(#333 vs #666, #545454, #777, #f90);
}

In this example, we set the background to a dark gray (#333) to test the contrast against. Then we use the vs keyword to separate the colors that are going to be tested as the color with the highest...