Ausreichender Farbkontrast entscheidet darüber, ob Text für alle Nutzerinnen und Nutzer lesbar bleibt – auch bei Sehbeeinträchtigung, grellem Sonnenlicht oder minderwertigen Displays. Mit dem Farbkontrast prüfen (WCAG) prüfen Sie zwei Farben in Sekunden gegen die Vorgaben der Web Content Accessibility Guidelines (WCAG 2.1). Diese Anleitung erklärt die Formel, die Grenzwerte und einen typischen Grenzfall aus der Praxis.
Wie das Kontrastverhältnis berechnet wird
Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen Vordergrund- und Hintergrundfarbe. Es wird aus der relativen Luminanz L der beiden Farben gebildet:
Kontrastverhältnis = (L_hell + 0,05) / (L_dunkel + 0,05)
Dabei ist L_hell die relative Luminanz der helleren, L_dunkel die der dunkleren Farbe (WCAG 2.1). Die relative Luminanz gewichtet die Rot-, Grün- und Blauanteile entsprechend der menschlichen Wahrnehmung. Die Werte reichen von 1:1 (kein Kontrast, identische Farben) bis 21:1 – dem Maximum bei reinem Schwarz auf reinem Weiß.
Die WCAG-Schwellen für AA und AAA
WCAG unterscheidet zwei Konformitätsstufen (AA, AAA) und zwei Textgrößen. „Großer Text" bedeutet ab 18 pt beziehungsweise ab 14 pt in fetter Schrift. Kleinere und normalgewichtete Schrift gilt als Normaltext.
| Anforderung | Normaltext | Großer Text |
|---|---|---|
| WCAG AA | ≥ 4,5:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4,5:1 |
AA ist die in Gesetzen und Ausschreibungen übliche Mindeststufe, AAA die anspruchsvollere Empfehlung. Größerer Text darf kontrastärmer sein, weil dickere Buchstabenformen auch bei geringerem Kontrast erkennbar bleiben.
Beispiel: ein knapper Grenzfall
Ein häufiger Fehler ist mittleres Grau für Fließtext. Reines Grau #777777 auf weißem Hintergrund ergibt ein Kontrastverhältnis von etwa 4,48:1. Das liegt knapp unter der AA-Schwelle von 4,5:1 – für Fließtext also nicht barrierefrei, obwohl es dem Auge auf den ersten Blick genügend erscheint. Erst ein etwas dunkleres Grau erreicht die geforderten 4,5:1. Genau solche Grenzfälle deckt der Rechner zuverlässig auf.
So gehen Sie beim Prüfen vor
Tragen Sie Vordergrund- und Hintergrundfarbe als Hex-Werte ein, etwa #333333 auf #FFFFFF. Der Rechner gibt das Verhältnis aus und zeigt für jede Kombination aus Stufe und Textgröße an, ob sie bestanden ist. Prüfen Sie Textfarben immer gegen die tatsächliche Hintergrundfarbe – auch bei Buttons, Links im Hover-Zustand und Text über Bildern. So stellen Sie sicher, dass Ihre Gestaltung nicht nur ansprechend, sondern nachweislich barrierefrei ist.
