WCAG Kontrast-Prüfer

Was die WCAG-Kontraststandards bedeuten

Die Web Content Accessibility Guidelines (WCAG) legen Mindest-Kontrastverhältnisse fest, damit Text für Menschen mit Sehbehinderungen lesbar bleibt. Der Grund ist einfach: Etwa jeder zwölfte Mann und jede zweihundertste Frau haben eine Form von Farbsehschwäche. Dazu kommen viele Menschen mit allgemein eingeschränkter Sehkraft, für die kontrastarmer Text schlicht unlesbar ist.

Kontrastverhältnisse verstehen

Das Kontrastverhältnis vergleicht die relative Helligkeit zweier Farben. Die Skala reicht von 1:1 (kein Kontrast, identische Farben) bis 21:1 (maximaler Kontrast, reines Schwarz auf reinem Weiß). Je höher der Wert, desto besser die Lesbarkeit.

Die WCAG-Stufen im Überblick

Stufe AA (der gängige Standard)

Das ist, was die meisten Websites erfüllen müssen. Die Anforderungen:

• Normaler Text: Mindestverhältnis 4,5:1
• Großer Text (ab 18 pt oder ab 14 pt fett): Mindestverhältnis 3:1

Stufe AAA (der erweiterte Standard)

Strengere Anforderungen für maximale Barrierefreiheit:

• Normaler Text: Mindestverhältnis 7:1
• Großer Text: Mindestverhältnis 4,5:1

Typische Fehler, die dieser Prüfer aufdeckt

Hellgrauer Text auf weißem Hintergrund

Designer greifen gerne zu hellem Grau, weil es edel wirkt — aber #999999 auf Weiß besteht die AA-Prüfung nicht. Für den Mindeststandard brauchst du mindestens #767676. Für Fließtext gilt: dunkler ist immer besser.

Markenfarben, die als Text versagen

Das knallige Gelb oder frische Grün, das im Logo toll aussieht, kann als Textfarbe auf weißem Hintergrund komplett durchfallen. Das ist einer der häufigsten Fehler, die erst auffallen, wenn jemand explizit darauf hinweist.

Text über Bildern

Weißer Text auf Fotos verliert in den hellen Bildbereichen oft den nötigen Kontrast. Dieser Prüfer hilft dir, eine Overlay-Farbe zu finden, die die Lesbarkeit durchgehend sicherstellt.

Platzhaltertext in Formularen

Formularfelder haben oft sehr helle Platzhalter. Ob WCAG direkt auf Platzhalter anwendbar ist, wird noch diskutiert — aber lesbare Platzhalter sind in jedem Fall gutes Design.

Wie du fehlerhafte Farben korrigierst

Wenn deine Kombination durchfällt, gibt es ein paar einfache Wege:

• Helle Textfarbe abdunkeln — oft reichen wenige Prozentpunkte Helligkeit
• Hintergrund aufhellen — das gleiche Prinzip in die andere Richtung
• Schriftgröße erhöhen — großer Text hat niedrigere Anforderungen
• Kontrast-Overlay hinzufügen — für Text auf Fotos ein halbtransparentes Hintergrundrechteck einsetzen

Rechtliche Anforderungen

In mehreren Ländern ist WCAG-Konformität verpflichtend:

• USA — ADA und Section 508 verweisen direkt auf WCAG
• EU — EN 301 549 schreibt WCAG 2.1 AA vor
• Großbritannien — öffentliche Websites müssen WCAG 2.1 AA erfüllen

Auch wo es keine gesetzliche Pflicht gibt, senkt WCAG-Konformität das Haftungsrisiko und macht deine Website für deutlich mehr Menschen nutzbar. Es lohnt sich schlicht.