contrast-color() nimmt Frontend-Teams eine kleine, lästige Rechenaufgabe ab: Der Browser wählt selbst, ob der Text auf einer farbigen Fläche schwarz oder weiß besser lesbar ist. Seit April 2026 beherrschen Chrome, Firefox und Safari die CSS-Funktion. Für Agenturen klingt das nach dem Ende manueller Kontrast-Prüfungen, doch die Automatik hat eine klare Grenze.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Problem ist alt und klein zugleich. Ein Preis-Badge, ein farbiger Button, ein Statuslabel, eine getönte Karte: Überall muss der Text lesbar bleiben, egal welche Hintergrundfarbe das Design vorgibt. Bislang lösten Entwickler das mit einer Sass-Funktion oder ein paar Zeilen JavaScript, die die Helligkeit der Fläche berechnen.
Das Wichtigste in Kürze
- Schwarz oder Weiß:
contrast-color(var(--farbe))gibt zu einer Hintergrundfarbe automatisch die besser lesbare der beiden Textfarben zurück. - Ohne Skript: Die CSS-Funktion ersetzt Sass-Helligkeitsformeln und kleine JavaScript-Helfer, die Websites bislang dafür luden.
- Seit April 2026: Chrome, Firefox und Safari unterstützen contrast-color(), Baseline stuft die Funktion als „Newly available“ ein.
- Keine WCAG-Garantie: Weil nur Schwarz und Weiß zur Wahl stehen, sichert die Funktion die geforderten 4,5:1 nicht auf jeder Fläche.
Was macht contrast-color() in CSS?
contrast-color() gibt zu einer Hintergrundfarbe automatisch Schwarz oder Weiß zurück, je nachdem, welcher Wert den höheren Kontrast liefert.
Die Funktion nimmt eine Farbe entgegen und liefert genau einen von zwei Werten.[1] Ein Aufruf wie color: contrast-color(var(--brand)) setzt auf einem markenfarbenen Button also von selbst schwarzen oder weißen Text, ohne dass Sie die Helligkeit im Kopf ausrechnen. Bei einem hellen Blau fällt die Wahl auf Schwarz, bei einem dunklen auf Weiß.
Nützlich wird das überall dort, wo die Hintergrundfarbe erst zur Laufzeit feststeht: bei per Variable gesetzten Themes, farbig markierten Kategorien oder Nutzern, die ihre Akzentfarbe selbst wählen. Bisher brauchte jede dieser Flächen eine eigene, fest hinterlegte Textfarbe.
Damit reiht sich die Funktion in einen Trend ein, den Frontend-Entwickler 2026 gut kennen. Modernes CSS übernimmt Aufgaben, für die Websites lange JavaScript oder Sass luden. Formularfelder wachsen mit field-sizing ganz ohne Skript. Auch Scroll-Animationen laufen inzwischen ohne die passende Bibliothek.
Reicht contrast-color() für barrierefreie Kontraste?
Nein, nicht allein. contrast-color() wählt nur zwischen Schwarz und Weiß und garantiert damit nicht die von der WCAG geforderten 4,5:1 für normalen Text.
Die Grenze steckt in der Funktionsweise. contrast-color() vergleicht nur zwei Kandidaten und nimmt davon den kontrastreicheren: reines Schwarz oder reines Weiß.[1] Ein präzises Verhältnis wie die 4,5:1 der Barrierefreiheits-Norm WCAG entsteht dabei nicht zwangsläufig.
Bei mittelhellen Flächen reicht keiner der beiden Werte. Ein kräftiges Blau wie #2277d3 bekommt von der Funktion weißen Text, der die Schwelle von 4,5:1 trotzdem verfehlt.[1] Die Dokumentation rät deshalb, contrast-color() nur auf klar helle oder klar dunkle Ausgangsfarben anzuwenden.
Für deutsche Betreiber kommt ein rechtlicher Punkt hinzu. Seit dem 28. Juni 2025 verlangt das Barrierefreiheitsstärkungsgesetz von vielen Shops und Dienstleistern lesbare Kontraste nach den WCAG-Werten.[3] contrast-color() nimmt Ihnen die Prüfung also nicht ab, sondern nur die Handarbeit bei sauber gewählten Farben. Wie schnell sich Lücken sonst einschleichen, zeigt schon der Alltag in einem barrierefreien Online-Shop.
contrast-color() ersetzt die Kopfrechnung, nicht das Urteilsvermögen. Barrierefreie Kontraste verlangen weiter eine bewusste Farbwahl und eine Prüfung des Ergebnisses, keine blinde Automatik.
— Markus Seyfferth, Chefredakteur Dr. Web
Zwei Werte, mehr nicht
Unterstützung seit 2026
Was für die Barrierefreiheit zählt
Können Sie contrast-color() heute einsetzen?
Ja, seit April 2026 unterstützen alle großen Browser contrast-color(), ein Fallback für ältere Geräte gehört aber weiter dazu.
Chrome und Edge liefern die Funktion seit Version 147, Firefox seit Version 146, Safari seit Version 26.[2] Damit steht contrast-color() auf der Baseline-Stufe „Newly available“. Die Stufe „Widely available“, die auch ältere Geräte einschließt, erreicht die Funktion planmäßig erst 2028.
Für den Produktiveinsatz sichern Sie die Funktion über einen @supports-Zweig ab. Browser ohne contrast-color() behalten die fest hinterlegte Textfarbe, moderne rechnen selbst. Bei strengen Vorgaben für alte Firmen-Browser bleibt die bisherige Lösung als Rückfallebene bestehen.
Für die Praxis heißt das vor allem, helle oder klar dunkle Ausgangsfarben zu nehmen und das Ergebnis bei Compliance-Pflichten trotzdem gegen die 4,5:1-Schwelle zu prüfen. Ob Ihre KI-Bausteine solche Vorgaben von selbst einhalten, steht ohnehin auf einem anderen Blatt. Für alles, was sauber helle oder dunkle Flächen betrifft, spart contrast-color() ab heute echten Aufwand.
Quellen
[1] MDN Web Docs: „contrast-color()“
[2] Can I use: „CSS contrast-color()“
[3] W3C: „Understanding SC 1.4.3 Contrast (Minimum)“
Mehr Newshunger?
- field-sizing in CSS: Wie Formularfelder ohne JavaScript mitwachsen
- CSS-Scroll-Animationen 2026: Wie der Browser die Scroll-Bibliothek ersetzt
- ShaderPad: Shader-Effekte auf jeder Website mit nur 5,9 Kilobyte
- Immer das gleiche graue Icon: Warum KI-Agenten bessere Design-Systeme brauchen
- Die KI liest zuerst: Was gutes Webdesign von schnell generierten Oberflächen trennt
