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...