contrast-color()

Baseline 2026 neu verfügbar April 2026 (Chrome 147, Firefox 146, Safari 26).

Chrome 147Edge 147Safari 26Firefox 146

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.

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

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

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