# contrast-color()

Status: Baseline 2026 neu verfügbar April 2026 (Chrome 147, Firefox 146, Safari 26).  
Quelle: https://web.dev/blog/baseline-digest-apr-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146  
Seite: https://designforai.dev/de/css/contrast-color

Gibt Schwarz oder Weiß zurück, je nachdem, was stärker mit der gegebenen Farbe kontrastiert. Text auf nutzergewählten oder berechneten Hintergründen (Tags, Avatare, Theme-Picker) bleibt ohne Nachschlagetabelle lesbar.

## 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: Setze ein Standard-`color` vor die contrast-color()-Zeile; ältere Browser behalten es. Sichere mit `@supports (color: contrast-color(red))` ab.

## Prompt

Wann immer Text auf einer dynamischen Hintergrundfarbe sitzt (Tags, Badges, Farbfelder, Nutzer-Themes), setze `color: contrast-color(var(--bg))` nach einer statischen Fallback-Farbe. Berechne keine Luminanz in JS. Beachte, dass die Funktion nur Schwarz oder Weiß zurückgibt; für getönten Text nutze weiterhin color-mix().