- CSS
contrast-color() lässt den Browser passend zu häufig wechselnden Farben wie einem Button-Hintergrund automatisch schwarzen oder weißen Text auswählen und reduziert so den Aufwand, Farbpaarungen getrennt zu verwalten
- Übergibt man eine Basisfarbe wie in
color: contrast-color(var(--button-color));, wird bei Änderungen der Hintergrundfarbe die Option mit dem höheren Kontrast neu berechnet
- Die aktuelle Safari Technology Preview verwendet den WCAG-2-Kontrastalgorithmus und wählt bei einem
#317CFF-Hintergrund schwarzen Text, obwohl Weiß für die menschliche Wahrnehmung natürlicher wirken kann
- Die Funktion garantiert Barrierefreiheit nicht automatisch; Design-Prüfungen zu Palette, Schriftgröße, Schriftstärke und Dingen wie
prefers-contrast bleiben nötig
- Die CSS Working Group beschränkt die Funktion bis zum Abschluss der Diskussionen über den WCAG-3-Kontrastalgorithmus zunächst auf die Auswahl zwischen Schwarz und Weiß; komplexere Werkzeuge zur Farbauswahl könnten später folgen
Weniger Aufwand bei der Farbverwaltung mit contrast-color()
- Wenn man auf einer Website oder in einer Web-App Buttons mit verschiedenen Hintergrundfarben baut, braucht man bei dunklem Hintergrund weißen Text und bei hellem Hintergrund schwarzen Text
- Bisher musste man Farbpaare wie
--button-color und --button-text-color gemeinsam definieren; in großen Projekten oder bei mehreren beteiligten Teams ist es schwer, diese Kombinationen dauerhaft korrekt zu halten
- Mit
contrast-color() kann man in CSS eine Basisfarbe übergeben, und der Browser wählt zwischen Schwarz und Weiß die Farbe mit dem höheren Kontrast
color: contrast-color(purple);
- Bei Buttons lassen sich die Hintergrundfarbvariable und
contrast-color() zusammen einsetzen
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
}
- Bei diesem Ansatz reicht es, nur eine Hintergrundfarbe zu definieren; die Textfarbe bestimmt der Browser passend dazu
Auch Zustandsfarben aus einer einzigen Variable ableiten
- Mit der Relative Color Syntax lässt sich aus der Grundfarbe des Buttons auch eine Hover-Farbe erzeugen, und die Textfarbe für jeden Zustand kann ebenfalls mit
contrast-color() berechnet werden
:root {
--button-color: purple;
--hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
text-box: cap alphabetic; /* vertically centers the text */
}
button:hover {
background-color: var(--hover-color);
color: contrast-color(var(--hover-color));
}
Unnatürliche Ergebnisse durch Berechnungen auf Basis von WCAG 2
contrast-color() löst Probleme mit Kontrast und Barrierefreiheit nicht automatisch vollständig- Bei manchen Hintergrundfarben entsteht weder mit Schwarz noch mit Weiß ein ausreichend hoher Kontrast; deshalb müssen Designer, Entwickler und Tester das weiterhin prüfen
- Die Implementierung in Safari Technology Preview verwendet mit Stand Mai 2025 den WCAG-2-Algorithmus
- Bei einem blauen
#317CFF-Hintergrund berechnet WCAG 2 für schwarzen Text ein Kontrastverhältnis von 5.45:1
- Für weißen Text auf demselben Hintergrund ergibt sich 3.84:1
contrast-color() wählt daher Schwarz, weil der Zahlenwert höher ist
- Für die menschliche Wahrnehmung kann in dieser Kombination Weiß jedoch besser aussehen; der WCAG-2-Algorithmus für Farbkontrast steht seit Langem in der Kritik
Die Diskussion um Kontrastalgorithmen mit APCA und WCAG 3
- Der Accessible Perceptual Contrast Algorithm (APCA) ist einer der Kandidaten, die in WCAG 3 aufgenommen werden könnten
- Der APCA Contrast Calculator bewertet bei einem
#317CFF-Hintergrund schwarzen Text mit Lc 38.7 und weißen Text mit Lc -70.9
- Ein negativer APCA-Wert bedeutet, dass der Text heller ist als der Hintergrund
- Für die Stärke des Kontrasts werden hier 38.7 und 70.9 ohne Vorzeichen verglichen
- In diesem Ergebnis hat weißer Text den stärkeren Kontrast
- APCA legt den Schwerpunkt auf wahrnehmungsbasierten Kontrast statt auf ein rein mathematisches Verhältnis und berücksichtigt, dass Menschen Kontrast je nach Farbe und Helligkeit nicht linear wahrnehmen
- Der CSS-Standard verlangt derzeit noch die Verwendung des bisherigen Algorithmus, enthält aber einen Hinweis darauf, dass künftig andere Kontrastalgorithmen hinzukommen könnten
- Welcher Algorithmus in WCAG 3 verwendet werden soll und wie die Lizenzen der Kandidaten behandelt werden, ist weiterhin Gegenstand der Diskussion
Was im echten Design zusätzlich geprüft werden muss
- Dass
contrast-color() die bessere Farbe auswählt, ist nicht dasselbe wie die Garantie für ausreichenden Kontrast
- Vor allem bei Mitteltönen können sich die Ergebnisse je nach Algorithmus deutlich unterscheiden
- Für Nutzer, die höheren Kontrast wünschen, kann zusätzlich die Media Query
prefers-contrast verwendet werden
@media (prefers-contrast: more) {
/* styling with more contrast */
}
- Im Beispiel wird
#2DAD4E als Marken-Button-Hintergrundfarbe für die Website einer Baumschule verwendet
- Nach APCA beträgt der Kontrast zu weißem Text Lc -60.4
- Ob dieser Wert ausreicht, hängt von Schriftgröße und Schriftstärke ab
- APCA verwendet statt des Verhältnisses aus WCAG 2 einen Einzelwert von Lc -108 bis 106
- Das APCA Readability Criterion bietet Zielwerte in den Stufen Bronze, Silver und Gold und hilft bei der Wahl von Schriftgröße und -stärke
- In der Beispielrechnung funktioniert die Kombination aus weißem Text und
#2DAD4E bei 24px Text mit font-weight 400 oder höher; für font-weight 300 sind mindestens 41px nötig
- Für Nutzer, die mehr Kontrast anfordern, lassen sich für Light Mode und Dark Mode getrennte Farben festlegen
- Light Mode: dunkleres Grün mit weißem Text, Lc -76.1
- Dark Mode: helleres Grün mit schwarzem Text, Lc 75.2
--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
@media (prefers-color-scheme: light) {
--button-color: #419543; /* darker green background */
}
@media (prefers-color-scheme: dark) {
--button-color: #77CA8B; /* lighter green background */
}
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
font-weight: 500;
}
- Da
contrast-color() derzeit mit dem WCAG-2-Algorithmus arbeitet, könnte es in diesem Beispiel für die Website schwer einsetzbar sein
- In Projekten mit einer dunkleren Markenfarbe Grün, bei denen die Auswahl zwischen Schwarz und Weiß korrekt ausfällt, kann die Funktion schon heute nützlich sein
- Besonders hilfreich ist
contrast-color(), wenn Farben für viele Zustände oder Optionen definiert werden müssen, etwa enabled/disabled, Light/Dark Mode oder prefers-contrast
Warum es zunächst auf Schwarz und Weiß beschränkt wurde
- Das aktuelle
contrast-color() ist deutlich einfacher als color-contrast(), das in Safari Technology Preview 122 enthalten war
- Die CSS Working Group verfolgt den Ansatz, angesichts der noch offenen Diskussion um den WCAG-3-Kontrastalgorithmus zunächst nur ein Werkzeug bereitzustellen, das zur Basisfarbe Schwarz oder Weiß auswählt
- Wenn die Auswahl auf Schwarz und Weiß festgelegt ist, sinkt die Wahrscheinlichkeit, dass Websites später durch Änderungen am WCAG-2-Algorithmus kaputtgehen
- Künftig könnten leistungsfähigere Werkzeuge folgen, bei denen der Browser aus einer benutzerdefinierten Farbliste auswählt oder ein gewünschtes Kontrastniveau vorgegeben wird
contrast-color() lässt sich nicht nur für Textfarben, sondern auch für viele andere Eigenschaften verwenden, die Farben festlegen, etwa Hintergrund oder Rahmen
Noch keine Kommentare.