Unzureichender Farbkontrast: Die 4,5:1-Regel erklärt

Hellgrauer Text auf weißem Hintergrund sieht in einem Design-Mockup sauber aus. Für Millionen von Menschen mit Sehbehinderung – einschließlich der meisten Menschen über 40, deren Kontrastempfindlichkeit mit dem Alter natürlicherweise nachlässt – kann er schwer oder unmöglich zu lesen sein. WCAGs Antwort auf "wie viel Kontrast ist genug" ist keine subjektive Ermessensfrage; es ist ein präzises mathematisches Verhältnis, weshalb es genau eine der zuverlässigsten automatisierbaren Prüfungen überhaupt ist. Branchendaten beziffern unzureichenden Kontrast auf etwa 68 % der ADA-Beschwerden zur Web-Barrierefreiheit – das dritthäufigste zitierte Problem nach Alternativtext und Formularbeschriftungen.

Die tatsächlichen Zahlen

WCAG-Erfolgskriterium 1.4.3 (Kontrast Minimum), Stufe AA, verlangt:

• 4,5:1 für normalen Fließtext
• 3:1 für großen Text – definiert als 18pt+ normale Schriftstärke oder 14pt+ fett

Das Verhältnis wird aus der relativen Leuchtdichte der Textfarbe und der Hintergrundfarbe berechnet, nicht aus einer einfachen visuellen Schätzung – deshalb kann ein Scanner wie axe-core es exakt berechnen und einen Fehler mit null Falsch-Positiven markieren, anders als fast jede andere WCAG-Prüfung.

Wo dies in der Praxis tatsächlich scheitert

• Grauer Text auf Weiß oder Grau auf Grau – die mit Abstand häufigste Quelle, meist weil die "gedämpfte" oder "sekundäre" Textfarbe eines Designsystems zu hell eingestellt ist
• Text über Bildern oder Farbverläufen – eine Bildunterschrift, die gegenüber dem hellsten Teil eines Hintergrundfotos genug Kontrast hat, aber nicht gegenüber dem dunkelsten
• Platzhaltertext in Formularfeldern, den Designer konventionsgemäß häufig heller gestalten als Fließtext, oft deutlich unter 4,5:1
• Deaktiviert wirkende Schaltflächen, die tatsächlich noch interaktiv und mit lesbarem Text versehen sind, nicht wirklich deaktiviert

Wie man es behebt

Wählen Sie Farben, die das Verhältnis erfüllen, und überprüfen Sie dies mit einem echten Kontrastrechner statt nach Augenmaß – der Unterschied zwischen Bestehen und Nichtbestehen ist oft ein Farbton, den die meisten Menschen mit bloßem Auge nicht unterscheiden können. WebAIMs Kontrastprüfer und der in Chrome DevTools integrierte Farbwähler (der das Live-Verhältnis anzeigt, während Sie anpassen) sind beide kostenlos und präzise.

/* Vorher: 2,8:1 – besteht AA nicht */
color: #999999;
background-color: #ffffff;

/* Nachher: 4,6:1 – besteht AA für normalen Text */
color: #767676;
background-color: #ffffff;

Wenn ein Token eines Designsystems die tatsächliche Ursache des Fehlers ist, beheben Sie das Token einmal, statt einzelne Seiten zu flicken – eine einzelne "gedämpfte Vordergrund"-Farbe, die zu hell ist, zieht sich meist über Dutzende einzelner Verstöße auf einer Website.

Ein genaueres Modell kommt, ist aber noch nicht der Standard

APCA (Accessible Perceptual Contrast Algorithm) ist ein neueres, perzeptiv basiertes Kontrastmodell, das für WCAG 3.0 entwickelt wird und genauer widerspiegelt, wie das menschliche Auge Kontrast tatsächlich wahrnimmt – die Verhältnisformel von WCAG 2.x ist bekanntermaßen sowohl über- als auch untersensibel bei bestimmten Farbkombinationen. AllyProof meldet APCA-Werte als informative Vorschau neben der Standard-WCAG-Prüfung, aber das Verhältnis von 4,5:1/3:1 aus 2.x ist heute noch der durchsetzbare Standard – behandeln Sie APCA-Ergebnisse als Hinweis auf Grenzfälle, nicht als Ersatz.

Offizielle Referenzen

• Deque University: color-contrast
• W3C Technique G18