This note has an interactive demo. Try it in the original

You give CSS a background color and it hands back white or black, whichever reads better on it. That's contrast-color() , and since April 2026 it works in Chrome, Firefox and Safari.

Play with the demo above for a minute. The big card has no text color set anywhere: drag the lightness slider, or hit Sweep , and watch the text flip from white to black at the point where black starts winning. The strip of twelve tiles below is the same idea at a glance: same lightness and chroma, twelve hues, and each tile flips at a different spot because yellow and blue don't have the same luminance at the "same" lightness.

What it is and why it matters

Any time a color comes from data (a tag color from a CMS, a user-picked theme, a chart series, a team's brand color) you need a text color that stays legible on top of it. Until now that meant a JavaScript helper, a Sass function at build time, or a lookup table of hand-checked pairs.…