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