contrast-color()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die contrast-color() CSS Funktion nimmt einen color-Wert und gibt eine garantiert kontrastreiche Farbe zurück.

contrast-color() vereinfacht es beispielsweise, eine Textfarbe anzugeben und automatisch eine kontrastreiche Hintergrundfarbe zu generieren, oder umgekehrt. Es vermeidet die Notwendigkeit, Hintergrund-Text-Farbpaare zu pflegen.

Syntax

css

contrast-color(red)
contrast-color(var(--backgroundColor))

Parameter

color: Jeder gültige <color> Wert.

Rückgabewert

Ein <named-color> von entweder white oder black.

Beschreibung

Die Funktion contrast-color() gibt entweder den Wert white oder black zurück, je nachdem, welcher Wert den größten Kontrast zur Eingabefarbe hat. Haben sowohl white als auch black den gleichen Kontrast zur Eingabefarbe, wird white` zurückgegeben.

Warnung: Es gibt keine Garantie, dass die mit der contrast-color() Funktion zurückgegebenen Werte ein barrierefreies Ergebnis liefern. Hintergrundfarben im mittleren Tonbereich bieten in der Regel nicht genügend Kontrast. Es wird daher empfohlen, helle oder dunkle Farben mit der contrast-color() Funktion zu verwenden.

Beispiele

Kontrastierender Text für einen Button

Im folgenden Beispiel wendet der Browser automatisch eine kontrastreiche Farbe auf den Text des Absende-<button> an, wenn Sie dessen Hintergrundfarbe ändern.

<label>
  Select background color of the button:
  <input type="color" id="colorPicker" value="#660066" />
</label>
<br />
<button>Submit</button>

css

:root {
  --button-color: lightblue;
}

button {
  background-color: var(--button-color);

  /* Set contrasting text color automatically */
  color: contrast-color(var(--button-color));
}

body {
  padding: 1rem;
}

button {
  margin: 3rem;
  padding: 1rem;
  width: 150px;
  font-size: 2rem;
  border-radius: 1rem;
}

@supports not (color: contrast-color(red)) {
  body::before {
    content: "Your browser doesn't support the contrast-color() function.";
    background-color: wheat;
    display: block;
    width: 100%;
    text-align: center;
  }

  body > * {
    display: none;
  }
}

const colorPicker = document.getElementById("colorPicker");
const root = document.documentElement;

function updateColor(color) {
  root.style.setProperty("--button-color", colorPicker.value);
}

colorPicker.addEventListener("change", updateColor);
updateColor();

Nutzung im hellen und dunklen Modus

Im folgenden Beispiel wird die prefers-color-scheme Media-Query verwendet, um basierend auf den Betriebssystem- oder Browser-Farbschemeneinstellungen eine Hintergrundfarbe festzulegen. Die contrast-color() Funktion wird benutzt, um die Textfarbe automatisch einzustellen.

Ändern Sie die Dunkelmodus-Einstellung im Browser oder Betriebssystem, um den Effekt zu sehen.

<pre>
    Q: How does CSS transform light into energy?
  Ans: Using <a href="/en-US/docs/Web/CSS/font-synthesis">font-synthesis</a>.
</pre>

css

:root {
  --background-color: navy;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: wheat;
  }
}

body,
a {
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}

body {
  padding: 2rem;
  font-size: 1.2rem;
}

pre {
  margin-top: 3rem;
}

@supports not (color: contrast-color(red)) {
  body::before {
    content: "Your browser doesn't support the contrast-color() function.";
    background-color: wheat;
    display: block;
    width: 100%;
    text-align: center;
  }

  body {
    background-color: white;
  }

  body > * {
    display: none;
  }
}

Spezifikationen

Specification
CSS Color Module Level 5 # contrast-color

Browser-Kompatibilität

Siehe auch

contrast()
CSS-Farb Modul
CSS benutzerdefinierte Eigenschaften und var()
prefers-contrast und prefers-color-scheme @media Funktionen
WCAG: Farbkontrast
Anleitung, wie der Browser eine kontrastierende Farbe in CSS auswählt auf webkit.org (2025)
WebAIM Kontrastprüfer auf webaim.org (2025)