Stellen Sie sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarben die WCAG 2 AAA erweiterten Kontrastverhältnisse erfüllt

Laut Web-Accessibility-Richtlinien muss der Farbkontrast zwischen Text und Hintergrund ausreichend hoch sein, um eine gute Lesbarkeit für Menschen mit Sehbeeinträchtigungen zu gewährleisten.

Warum es wichtig ist

Benutzer mit Sehbehinderungen erleben oft einen niedrigen Kontrast, was bedeutet, dass es nicht viele helle oder dunkle Bereiche gibt. Wenn Dinge ungefähr die gleiche Helligkeit haben, kann es schwierig sein, Umrisse, Ränder, Kanten und Details zu unterscheiden. Der Text, der in der Helligkeit dem Hintergrund zu ähnlich ist, kann ebenfalls schwer lesbar sein.

Behebung des Problems

Entwickler sollten sicherstellen, dass alle Textelemente einen ausreichenden Farbkontrast zwischen dem Text im Vordergrund und der Hintergrundfarbe dahinter haben.

Der Farbkontrast sollte mindestens 7:1 für kleinen Text oder 4,5:1 für großen Text betragen, auch wenn der Text Teil eines Bildes ist. Großer Text ist definiert als 18pt (24 CSS-Pixel) oder 14pt fett (19 CSS-Pixel).

Testfälle

Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.