WCAG und Farbkontrast

Kurz: Die WCAG (Web Content Accessibility Guidelines) sind der internationale Maßstab für barrierefreie Webseiten. Eine ihrer Regeln: Text muss sich ausreichend von seinem Hintergrund abheben.

Genauer: Die Richtlinien des W3C gliedern sich in vier Prinzipien: wahrnehmbar, bedienbar, verständlich und robust. Es gibt drei Konformitätsstufen: A, AA und AAA. Für die meisten Angebote ist AA das Ziel, das auch Gesetze wie das deutsche Barrierefreiheitsstärkungsgesetz (BFSG) und die europäische Norm EN 301 549 voraussetzen.

Im Detail

Das Kontrastverhältnis

Der Kontrast wird als Verhältnis der relativen Helligkeiten zweier Farben angegeben, von 1:1 (gleich) bis 21:1 (Schwarz auf Weiß). Die Helligkeit eines Farbwerts wird aus den Rot-, Grün- und Blauanteilen berechnet; Grün zählt am stärksten, Blau am wenigsten, weil das Auge dafür weniger empfindlich ist.

Formel: Kontrast = (L1 + 0,05) / (L2 + 0,05), wobei L1 die Helligkeit der helleren und L2 der dunkleren Farbe ist.

Mindestwerte

Inhalt	Stufe AA	Stufe AAA
Normaler Text	4,5 : 1	7 : 1
Großer Text (ab etwa 24 px oder 19 px fett)	3 : 1	4,5 : 1
Bedienelemente und Grafiken (Rahmen, Symbole)	3 : 1	–

Grauer Text auf Weiß ist der häufigste Fehler: #767676 auf Weiß erreicht gerade die 4,5 : 1, #999999 nicht mehr.

Warum das wichtig ist

Rund jeder zwölfte Mann hat eine Farbsehschwäche, viele Menschen sehen im Alter schlechter, und auf dem Handy in der Sonne ist jeder auf guten Kontrast angewiesen. Schwacher Kontrast ist außerdem einer der meisten Gründe, warum automatische Prüfungen wie Lighthouse eine Seite abwerten.

Weitere Regeln rund um Farbe

• Nicht nur Farbe als Hinweis: Fehler zusätzlich mit Text oder Symbol markieren, nicht nur rot färben.
• Fokus sichtbar: Das fokussierte Element (Tastatur) braucht einen deutlichen Rahmen.
• Dunkelmodus braucht eigene Farbwerte, die ebenfalls geprüft werden müssen.

Prüfen und korrigieren

Mit einem Kontrast-Prüfer gibt man Vorder- und Hintergrundfarbe ein und erhält das Verhältnis sowie eine Aussage zu AA und AAA. Reicht der Wert nicht, macht man den Text dunkler (auf hellem Grund) oder heller (auf dunklem Grund), bis die Grenze erreicht ist. Das ist meist eine kleine Anpassung, die kaum auffällt, aber vielen hilft.

Siehe auch: Barrierefreiheit, CSS, HTML