Farbkontrast: WCAG-Regeln für lesbaren Text

Kurz erklärt: Der Farbkontrast ist das Helligkeits-Verhältnis zwischen Text und Hintergrund. WCAG 2.1 Level AA fordert mindestens 4,5:1 für Normaltext und 3:1 für Großtext (ab 18pt oder 14pt fett). Nicht erfüllte Kontraste sind einer der häufigsten BFSG-Verstöße.

Nahezu jede Webseite scheitert an Kontrasten an mindestens einer Stelle: hellgrauer Platzhalter-Text in Formularen, blasse Links, zarte Footer-Schrift, Buttons mit "modernem" Design. Was Designer als elegant empfinden, ist für Menschen mit Sehschwäche (rund 16 Mio. Brillenträger in Deutschland) oft nicht lesbar.

Die WCAG-Schwellwerte

WCAG 2.1 AA (BFSG-Minimum): 4,5:1 für Normaltext, 3:1 für Großtext (ab 18pt oder 14pt fett).
WCAG 2.1 AAA (strenger): 7:1 für Normaltext, 4,5:1 für Großtext. Für das BFSG nicht zwingend, aber inklusiver.
Ausnahme: reiner Dekor-Text (z. B. Logo-Elemente, inaktive Elemente) und Text auf Bildern in der reinen Gestaltungs-Funktion sind ausgenommen.

Wie berechnet sich Kontrast?

Das Kontrastverhältnis berechnet sich nach WCAG-Formel aus der relativen Helligkeit (Luminanz) beider Farben. Der Wert reicht von 1:1 (gleiche Farben, unlesbar) bis 21:1 (Schwarz auf Weiß, maximal). Nicht mit HSL-Helligkeit oder RGB-Nähe verwechseln!

Tools zur Prüfung

(1) WebAIM Contrast Checker – kostenlos, weit verbreitet.
(2) bf-check.de – prüft Kontraste automatisch im Kontext der Seite.
(3) Browser-DevTools (Chrome, Firefox) zeigen Kontrast direkt im Inspektor.
(4) Stark-Plugin für Figma/Sketch – Prüfung bereits im Design.
(5) Colour Contrast Analyser (CCA) – Desktop-Tool.

Typische Problem-Stellen

Platzhalter-Text in Formularen (meist nur 2:1 Kontrast). Deaktivierte Buttons mit grauem Text. Footer-Links in #999 auf Weiß (nur 2,85:1). Text auf Bildern ohne Overlay. Fehlerhinweise in Rot (#ff0000 auf #ffffff ist nur 4:1 – unter dem AA-Schwellwert). Blauer Link (#0000ff) auf Weiß: 8,6:1 ist gut, aber viele Design-Systeme nutzen hellere "modernere" Blaus, die scheitern.

Nicht nur Farbe: WCAG 1.4.1

Zusätzlich zu Kontrastwerten verlangt WCAG 1.4.1 Use of Color, dass Information nie allein über Farbe vermittelt wird. Pflichtfelder nur mit rotem Sternchen und ohne textliche Kennzeichnung sind ein Verstoß. Fehlerhinweise ausschließlich rot umrandet – verletzen die Regel.

Wird geprüft: bf-check prüft berechnete Text-Hintergrund-Kontraste und warnt bei Unterschreitung des AA-Schwellwerts.

Wie steht deine Webseite in diesem Punkt da?

Kostenloser Scan gegen 15 WCAG-2.1-AA-Kriterien – inkl. Farbkontrast-Check.

Jetzt Webseite prüfen →