The contrast-color() function

I felt the contrast-color() function was going to be very useful when it was the color-contrast() function, but not anymore. Confused? I’m not surprised. Let me explain.

The original color-contrast() function

In the prior version of this book, I detailed a new function that helped to choose contrasting colors, as it was specified at that time. The function was color-contrast() and it let you specify a color, then at least another two colors, to effectively compete for the title of “most contrasting color,” like this:

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

You can see two examples of color-contrast() being used in the code of swatches 11 and 12 of our example. However, you may not actually be able to see them, as they are no longer working in the latest browser versions. Why?

The original color-contrast() function was flawed

That color-contrast() function has now been...