# contrast-color()

Status: Baseline 2026 newly available April 2026 (Chrome 147, Firefox 146, Safari 26).  
Source: https://web.dev/blog/baseline-digest-apr-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146  
Page: https://designforai.dev/css/contrast-color

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.

## HTML

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

## CSS

```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))
}
```

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

## 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().