WCAG-Kontrastprüfer für Farben

WCAG-Anforderungen an den Kontrast

Die Web Content Accessibility Guidelines legen Mindestkontraste fest, damit Text für Menschen mit Sehschwäche, Farbsehschwäche oder einem Smartphone im hellen Sonnenlicht lesbar bleibt. Die Verhältnisse reichen von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß).

AA, normaler Text

Mindestens 4.5:1 (Erfolgskriterium 1.4.3). Die Stufe, die die meisten Gesetze und Barrierefreiheitsrichtlinien verlangen, darunter der European Accessibility Act, in Deutschland umgesetzt durch das Barrierefreiheitsstärkungsgesetz, und die ADA-Leitlinien in den USA.

AA, großer Text

Mindestens 3:1. Groß bedeutet ab 24 px (18 pt) oder ab 18.66 px (14 pt) bei fetter Schrift.

AAA, normaler Text

Mindestens 7:1 (Erfolgskriterium 1.4.6). Die erweiterte Stufe, die sich für längere Lesetexte lohnt.

AAA, großer Text

Mindestens 4.5:1.

Nicht-Text-Kontrast

Mindestens 3:1 (Erfolgskriterium 1.4.11) für Icons, Rahmen von Eingabefeldern, Fokusringe, Diagrammlinien und die Teile eines Bedienelements, die man sehen muss, um es zu benutzen.

Wie das Kontrastverhältnis berechnet wird

Jede Farbe wird in ihre relative Leuchtdichte umgerechnet: Die sRGB-Kanäle werden linearisiert (die Gammakurve wird rückgängig gemacht) und mit 0.2126 für Rot, 0.7152 für Grün und 0.0722 für Blau gewichtet, weil das Auge für Grün weit empfindlicher ist. Das Verhältnis ist dann (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere Farbe ist. Beispielsweise ergibt #777777 auf Weiß 4.48:1, knapp unter AA, während #767676 4.54:1 erreicht und besteht.

Ein Verhältnis wird nie auf einen Schwellenwert aufgerundet: WCAG stellt ausdrücklich klar, dass 4.49:1 die Anforderung 4.5:1 nicht erfüllt. Durchscheinende Farben werden zuerst so überlagert, wie der Browser sie zeichnet: der Vordergrund über dem Hintergrund und ein durchscheinender Hintergrund über Weiß.

Eine durchgefallene Farbe korrigieren

Die Vorschläge behalten Farbton und Sättigung Ihrer Textfarbe bei und ändern nur ihre Helligkeit in OKLCH, dem wahrnehmungsbasierten Farbraum, den CSS inzwischen unterstützt. Dabei wird schrittweise dunkler und heller gegangen, bis das Verhältnis besteht, und die Variante gewählt, die näher am Original liegt. Das Ergebnis ist meist dieselbe Markenfarbe, etwas tiefer oder heller, statt eines Sprungs zu Schwarz. Kann kein Ton dieses Farbtons das Ziel auf Ihrem Hintergrund erreichen, sagt das Tool es, und dann muss der Hintergrund geändert werden.

Um selbst andere Varianten auszuprobieren, öffnen Sie die Farbe im Farbkonverter und gehen Sie ihre Aufhellungen und Abdunklungen durch, oder gewinnen Sie Kandidaten aus einem Foto mit dem Farbpaletten-Generator.

Häufige Kontrastfehler

• Platzhalter und deaktiviert wirkender Text. Hellgrauer Platzhaltertext ist trotzdem Text und muss 4.5:1 erfüllen, wenn Nutzer ihn brauchen. Wirklich deaktivierte Bedienelemente sind ausgenommen, alles, was nur deaktiviert aussieht, nicht.
• Text auf Bildern und Verläufen. Prüfen Sie den hellsten Teil des Bildes hinter dem Text, nicht den Durchschnitt. Eine dunkle Überlagerung oder eine einfarbige Fläche hinter dem Text ist die verlässliche Lösung.
• Markenfarben als Textfarbe. Ein kräftiges Orange oder Türkis kann auffällig wirken und auf Weiß trotzdem durchfallen. Nutzen Sie den Vorschlag, um eine tiefere Variante desselben Farbtons für Text zu finden, und behalten Sie die leuchtende für große Überschriften oder Dekoration.
• Fokusringe und Rahmen von Eingabefeldern. Ein 1 px breiter hellgrauer Rahmen um ein Textfeld verfehlt oft die 3:1-Regel für Nicht-Text-Elemente, sodass Menschen mit Sehschwäche das Feld schwer finden.
• Dark Mode. Ein Paar, das im hellen Theme besteht, sagt nichts über das dunkle aus. Prüfen Sie beide Themes und nutzen Sie den Tausch-Button für einen schnellen Blick auf das umgekehrte Paar.

APCA und WCAG 3

Unter den WCAG-2-Ergebnissen sehen Sie außerdem einen APCA-Helligkeitskontrast, geschrieben Lc. APCA ist das Kontrastverfahren, das für das künftige WCAG 3 vorgeschlagen wird. Es berücksichtigt die Schriftstärke und die Tatsache, dass heller Text auf dunklem Hintergrund einen anderen Kontrast braucht als dunkler Text auf hellem, was die WCAG-2-Formel ignoriert; deshalb wechselt auch das Vorzeichen, wenn Sie die Farben tauschen. Als grobe Orientierung eignet sich Lc 75 für Fließtext, Lc 60 für anderen lesbaren Text und Lc 45 für große Überschriften. WCAG 3 ist noch ein Entwurf, betrachten Sie APCA daher als Zusatzinformation: WCAG 2.x bleibt der Standard, auf den sich Audits und Gesetze beziehen.