Was ist CSS contrast-color()-Funktionsgenerator?
Die CSS-Funktion contrast-color() (Baseline 2026) wählt die Farbe mit dem höchsten Kontrastverhältnis aus einer Liste von Kandidaten gegen einen bestimmten Hintergrund. Mit contrast-color(Hintergrund vs Farbe1, Farbe2, ...) geben Sie die Hintergrundfarbe und eine Liste von Kandidatenfarben an. Die Funktion bewertet das WCAG-Kontrastverhältnis jedes Kandidaten und gibt den mit dem besten Verhältnis zurück.
Kurze Antwort
Verwenden Sie CSS contrast-color(Hintergrund vs Kandidaten...), um automatisch die lesbarste Farbe aus einer Liste auszuwählen. Funktioniert in Chrome 132+, Edge 132+, Safari 19+ und Firefox 136+. Verwenden Sie CSS-Custom-Properties für die Designsystem-Integration.
Last updated: 2026-05-30
Einschränkungen
- contrast-color() wird vor Chrome 132, Safari 19 oder Firefox 136 nicht unterstützt. Stellen Sie immer eine Fallback-Farbe bereit.
- Die Funktion bewertet den Kontrast basierend auf der relativen Luminanz, einer mathematischen Näherung der Farbwahrnehmung.
- contrast-color() wählt eine einzelne Farbe aus der Kandidatenliste. Es kann keine Zwischenfarben erzeugen oder die Opazität anpassen.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Geben Sie die Hintergrundfarbe ein, gegen die der Kontrast gemessen wird. Dies kann ein Hex-, RGB-, HSL- oder benannter Farbwert sein.
- Fügen Sie Kandidatenfarben hinzu - die Funktion bewertet jede gegen den Hintergrund und wählt die beste.
- Wählen Sie den Kontrastmodus: to max für höchsten Kontrast oder prioritäre Reihenfolge.
- Kopieren Sie den generierten contrast-color()-Ausdruck in Ihr Stylesheet.
Wofür du es nutzen kannst
- Gestalten Sie Textüberlagerungen auf Hero-Bildern, wo der Text unabhängig von der Hintergrundfarbe lesbar bleiben muss.
- Bauen Sie Badge- und Tag-Komponenten, die die Textfarbe automatisch an die Hintergrundfarbe anpassen.
- Erstellen Sie ein dynamisches Button-System, das die Textfarbe an den Button-Hintergrund anpasst.