contrast-color()

Baseline 2026 newly available April 2026 (Chrome 147, Firefox 146, Safari 26).

Chrome 147Edge 147Safari 26Firefox 146

Returns black or white, whichever contrasts more with the given color. Text on user-chosen or computed backgrounds (tags, avatars, theme pickers) stays readable without a lookup table.

YellowNavyOrange

CSS

.fx-032 span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  margin: 4px;
  font: 600 13px system-ui;
    background: var(--bg);
  color: contrast-color(var(--bg))
}

HTML

<div class="fx-032">
  <span style="--bg:#fde047">Yellow</span><span style="--bg:#1e3a8a">Navy</span><span style="--bg:#f97316">Orange</span>
</div>

Fallback: Set a default `color` before the contrast-color() line; older browsers keep it. Guard with `@supports (color: contrast-color(red))`.

Source: web.dev/blog/baseline-digest-apr-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146

Prompt

Whenever text sits on a dynamic background color (tags, badges, color swatches, user themes), set `color: contrast-color(var(--bg))` after a static fallback color. Do not compute luminance in JS. Note the function returns only black or white; for tinted text keep using color-mix().