Let CSS choose black or white text with contrast-color()

Labels and buttons often have a small styling problem: white text looks clear on a dark blue background, but becomes hard to read on pale yellow. When users can choose a background color, the text color needs to adapt too.

Chrome 147, released on April 7, 2026, adds contrast-color(). Give it a background color and the browser chooses whichever of black or white has higher contrast against that color. That saves writing the decision in JavaScript.

The simplest example#

Suppose a button has a yellow background:

button {
  background: yellow;
  color: contrast-color(yellow);
}

This means: "Use a yellow background, and let the browser choose whichever of black or white is easier to read against it." The result is black text on yellow.

Change both occurrences of yellow to darkblue, and the result becomes white text on dark blue. You must pass the background color to contrast-color(); it does not read background automatically. This example requires a browser that supports the feature.

Choosing text color, not an entire palette#

contrast-color() currently chooses only black or white. It does not choose brand colors or analyze background photos. It compares against the color you pass in, so gradients, images, and translucent backgrounds still need a visual check.

I find this most useful for small components such as category labels and status badges. Changing a background used to mean choosing a matching text color as well. CSS can now handle that decision with a short, clear rule.