Farbkontrastprüfer

Die Web Content Accessibility Guidelines (WCAG) 2.1, veröffentlicht vom W3C, definieren minimale Kontrastverhältnisse, um sicherzustellen, dass Text von Personen mit Sehbehinderungen lesbar ist. Die Richtlinien geben drei Konformitätsstufen an: A (Minimum), AA (Standard), AAA (Erweitert). Für AA-Level ist bei normalem Text (unter 18pt oder 14pt fett) ein Verhältnis von 4,5:1 erforderlich, bei großem Text (18pt+ oder 14pt+ fett) 3:1. Für AAA-Level sind die Anforderungen strenger: 7:1 für normalen Text, 4,5:1 für großen Text.

Das Kontrastverhältnis wird mit der relativen Leuchtdichte der beiden Farben berechnet. Die relative Leuchtdichte ist eine gewichtete Summe der linearisierten RGB-Kanäle: L = 0,2126*R + 0,7152*G + 0,0722*B, wobei R, G, B die gammakorrigierten Werte sind. Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Farbe ist. Der 0,05-Offset berücksichtigt das Umgebungslicht des Bildschirms.

Diese Anforderungen sind nicht willkürlich – sie basieren auf umfangreicher Forschung zum menschlichen Sehen. Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbsehstörung (Farbenblindheit). Niedriger Kontrast betrifft nicht nur diese Nutzer, sondern auch jeden, der bei hellem Sonnenlicht, auf niedrigwertigen Displays oder in schrägen Winkeln auf den Bildschirm schaut. Die Einhaltung der WCAG-AA-Kontrastanforderungen verbessert die Lesbarkeit für alle, nicht nur für Nutzer mit Behinderungen.

Der häufigste Kontrastfehler ist die Verwendung von hellgrauem Text auf weißem Hintergrund. Ein beliebtes Designtrend ist die Verwendung von #999- oder #AAA-Grautext für sekundäre Informationen, aber diese Farben haben Kontrastverhältnisse von 2,85:1 bzw. 2,32:1 – weit unter dem 4,5:1-Minimum. Verwenden Sie für sekundären Text auf weißem Hintergrund mindestens #767676 (4,54:1). Ein weiteres häufiges Problem ist die Verwendung von Markenfarben, die visuell ansprechend aussehen, aber den Kontrasttest nicht bestehen.

Bei großem Text (Überschriften, Schaltflächen) ist die 3:1-Anforderung großzügiger, aber missbrauchen Sie sie nicht. Großer Text, der 3:1 kaum besteht, ist für viele Nutzer immer noch schwer zu lesen. Streben Sie nach Möglichkeit immer 4,5:1 an, unabhängig von der Textgröße. Wenn Sie farbige Hintergründe verwenden, testen Sie die Textfarbe in allen Zuständen, einschließlich Hover und Fokus.