Farbkontraste richtig prüfen (WCAG 1.4.3)

Zu geringe Farbkontraste sind der mit Abstand häufigste Barrierefreiheits-Fund und meist schnell behoben. Dieser Beitrag erklärt, welche Werte nach WCAG 2.1 AA gelten, wie du sie misst und typische Fälle löst.

Welche Kontrastwerte gelten

Das Kontrastverhältnis wird als Wert zwischen 1:1 (kein Kontrast) und 21:1 (Schwarz auf Weiß) angegeben. WCAG 2.1 AA verlangt:

• Normaler Text: mindestens 4,5:1 zwischen Textfarbe und Hintergrund.
• Großer Text: mindestens 3:1 (ab ca. 24px, oder ab ca. 19px wenn fett).
• Bedienelemente und Grafiken: mindestens 3:1 für Rahmen/Zustände von Buttons, Eingabefeldern, Icons und ähnlichem (SC 1.4.11).

Kontrast messen

Du brauchst nur die beiden Farbwerte (z. B. aus dem CSS). Prüfen kannst du sie mit dem Kontrast-Prüfer in den Entwicklertools des Browsers (Element auswählen, der Kontrastwert wird beim Farbfeld angezeigt) oder mit einem Kontrast-Rechner, in den du Vorder- und Hintergrundfarbe einträgst. Wichtig: Bei Text über Bildern oder Farbverläufen gilt die ungünstigste Stelle.

Typische Problemfälle und Lösungen

• Hellgraue Hilfstexte (z. B. Platzhalter, Bildunterschriften) auf Weiß: Grauton abdunkeln, bis 4,5:1 erreicht ist.
• Farbige Buttons mit hellem Text: entweder Text dunkler oder Buttonfarbe kräftiger.
• Text auf getönten Flächen (Karten, Banner): Kontrast gegen die tatsächliche Hintergrundfarbe prüfen, nicht gegen Weiß.
• Deaktivierte Elemente sind ausgenommen, wirklich deaktivierte aber klar als solche erkennbar halten.

Automatisch prüfen

Kontrast ist einer der wenigen Punkte, die sich sehr zuverlässig automatisch messen lassen. Ein kostenloser BFSG-Check markiert Stellen mit zu geringem Kontrast direkt im Screenshot deiner Seite. Weiter geht es unter Website barrierefrei machen.

Dieser Beitrag dient der allgemeinen Information und ist keine Rechtsberatung. Für eine verbindliche Einschätzung deiner konkreten Situation wende dich an einen Rechtsanwalt.