The CSS contrast-color() function takes a <color> value (as well as a variable) and returns either black or white, whichever is the most contrasting color for that value.

In other words, contrast-color() is sort of an accessibility tool for conforming to WCAG contrast requirements .

.card { background-color: var(--swatch); color: contrast-color(var(--swatch)); }

For example, on the next demo update the background color to see the text color change automatically.

The contrast-color() function is defined in the CSS Color Module Level 5 specification.

Syntax

The CSS contrast-color() function syntax is is formatted like this:

contrast-color() = contrast-color( <color> )

Let’s break that down with examples.

Arguments

/* Using a custom variable */ contrast-color(var(--base-background));

/* Passing a color directly */ contrast-color(#34cdf2); contrast-color(green);

contrast-color() takes a <color> as its only argument and resolves to white or black, depending on which has the highest contrast.…