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 Farbwert und gibt eine kontrastierende Farbe zurück. Die Funktion sorgt in der Regel für den WCAG AA Mindestkontrast. Die Browser können unterschiedliche und bessere Algorithmen verwenden.

contrast-color() erleichtert es zum Beispiel, eine Textfarbe festzulegen und automatisch eine kontrastierende Hintergrundfarbe zu erzeugen oder umgekehrt. Es entfällt die Notwendigkeit, Hintergrund-Textfarbpaare zu pflegen.

Syntax

css

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

Parameter

color: Jeder gültige <color> Wert.

Rückgabewert

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

Beschreibung

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

Warnung: WCAG AA (4.5:1) Kontrast kann in allen Fällen keinen klar lesbaren Text erzeugen. Mittelton-Hintergrundfarben bieten im Allgemeinen nicht genug Kontrast zu einem schwarzen oder weißen Vordergrund. Zum Beispiel erzeugt contrast-color() auf einem königsblauen (#2277d3) Hintergrund schwarzen Text, der für kleinen Text nicht lesbar ist. Es wird daher empfohlen, helle oder dunkle Farben mit der contrast-color() Funktion zu verwenden.

Beispiele

Kontrastreicher Text für einen Button

Im folgenden Beispiel wendet der Browser automatisch eine kontrastierende Farbe auf den Text des Absenden-<button> an, wenn Sie die 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();

Verwendung von Licht- und Dunkelmodus

Im folgenden Beispiel wird die prefers-color-scheme Media Query verwendet, um eine Hintergrundfarbe basierend auf den Einstellungen des Betriebssystems oder des Browser-Farbschemas festzulegen. Die contrast-color() Funktion wird verwendet, um automatisch die Textfarbe festzulegen.

Versuchen Sie, die Dunkelmodus-Einstellung des Browsers oder des Betriebssystems zu ändern, 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 Farben 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üfung auf webaim.org (2025)

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden