Farbkontraste und Barrierefreiheit

Was fordert die WCAG?

Die WCAG 2.2 definiert zwei Kontrast-Kriterien auf AA-Niveau (Quelle: MDN Web Docs, stolperfrei.digital):

1.4.3 Kontrast (Minimum) - AA

1.4.11 Nicht-Text-Kontrast - AA

UI-Komponenten (Buttons, Formularfelder, Icons) und grafische Objekte brauchen mindestens 3:1 Kontrast zu ihrer Umgebung. Das gilt für den Zustand der Komponente - ein Button muss sich ausreichend vom Hintergrund abheben.

Wie wird Kontrast berechnet?

Das Kontrastverhältnis wird nach einer festen Formel berechnet (Quelle: stolperfrei.digital):

Kontrast = (L1 + 0,05) / (L2 + 0,05)

L1 = relative Luminanz der helleren Farbe
L2 = relative Luminanz der dunkleren Farbe

Die relative Luminanz wird aus den RGB-Werten berechnet, wobei jeder Farbkanal zuerst linearisiert und dann mit Gewichtungsfaktoren versehen wird (Rot: 0,2126, Grün: 0,7152, Blau: 0,0722). Grün hat den größten Einfluss auf die wahrgenommene Helligkeit.

Das Ergebnis ist ein Verhältnis von mindestens 1:1 (identische Farben) bis maximal 21:1 (Schwarz auf Weiß). Sie müssen die Formel nicht selbst anwenden - nutzen Sie unseren Kontrast-Checker.

Häufige Kontrastfehler

Hellgrauer Text auf Weiß

Der Klassiker. #999999 auf #FFFFFF ergibt nur 2,85:1 - weit unter dem Minimum von 4,5:1. Sieht "elegant" aus, ist aber für viele Menschen nicht lesbar. Lösung: Mindestens #767676 verwenden (4,54:1).

Platzhaltertext in Formularen

Browser zeigen Placeholder-Text standardmäßig in Hellgrau. Wenn das die einzige Beschriftung des Feldes ist, haben Nutzer mit Seheinschränkung ein doppeltes Problem: Schlechter Kontrast und das Label verschwindet beim Tippen. Lösung: Sichtbares Label über dem Feld verwenden, Placeholder nur als Ergänzung.

Farbiger Text auf farbigem Hintergrund

Rot auf Blau, Grün auf Orange, Gelb auf Weiß - Farbkombinationen die subjektiv "gut aussehen" können trotzdem zu wenig Kontrast haben. Prüfen Sie immer mit einem Tool, verlassen Sie sich nicht auf den eigenen Bildschirm.

Text auf Bildern

Text der über einem Foto liegt hat an manchen Stellen genug Kontrast, an anderen nicht - je nach Bildhintergrund. Lösung: Halbtransparenten Overlay unter den Text legen oder Text außerhalb des Bildes platzieren.

Fokus-Indikatoren

Der Fokusrahmen um das aktive Element muss mindestens 3:1 Kontrast zum umgebenden Hintergrund haben. Ein hellblauer Fokusring auf weißem Hintergrund ist nicht sichtbar genug.

Kontrast und Farbe sind nicht dasselbe

Ein häufiges Missverständnis: "Meine Farben haben genug Kontrast" bedeutet nicht automatisch, dass die Seite barrierefrei ist. WCAG 1.4.1 fordert zusätzlich, dass Informationen nie nur über Farbe vermittelt werden.

Beispiele:

• Fehlermeldungen: Nicht nur roten Text verwenden, sondern zusätzlich ein Symbol oder das Wort "Fehler"
• Links im Fließtext: Nicht nur durch Farbe erkennbar, sondern auch unterstrichen
• Pflichtfelder: Nicht nur ein rotes Sternchen, sondern der Text "Pflichtfeld" oder eine Legende
• Diagramme: Nicht nur verschiedene Farben, sondern auch verschiedene Muster oder Beschriftungen

Kontrast prüfen

Nutzen Sie unseren Kontrast-Checker direkt auf dieser Website. Geben Sie zwei Farben ein und sehen Sie sofort ob das Verhältnis für AA und AAA reicht.

Weitere empfehlenswerte Tools (Quelle: barrierefreies.design):

• WebAIM Contrast Checker - schnell und übersichtlich
• TPGi Colour Contrast Analyser - Desktop-Anwendung mit Pipette zum Messen direkt auf dem Bildschirm
• Browser DevTools - Chrome und Firefox zeigen Kontrastverhältnisse im Element-Inspektor direkt an