WCAG Color Contrast Checker
Um zu überprüfen, ob der Farbkontrast den Anforderungen der WCAG-Zugänglichkeit entspricht, ist die WCAG Color Contrast Checker-Erweiterung ein großartiges Tool. Dieses Tool ist als Erweiterung für Chrome, Firefox und Edge verfügbar und kann den Farbkontrast zwischen dem Vordergrund und dem Hintergrund der Elemente auf der Seite gemäß den WCAG 2 Kontrast- und Farbvorlagen überprüfen.
Zusätzlich wertet dieses Tool den Kontrast aller Elemente der Seite unter Berücksichtigung ihrer berechneten Styles für die CSS-Eigenschaften color und background-color aus. Wenn diese Farben mit RGBA-Werten definiert sind, berücksichtigt es auch die Opazität, um die tatsächliche Farbe zu ermitteln, die schließlich angezeigt wird.
Das Tool enthält zwei Felder, in die Farben manuell eingegeben werden können, um getestet zu werden, und ermöglicht es Ihnen, die Farbe direkt aus den Dokumenten auszuwählen.
Schließlich aktualisiert es automatisch, wenn sich der DOM der Seite ändert (Elemente hinzufügen oder entfernen), jedoch kann dieses Verhalten deaktiviert werden, wenn die Seite viele Änderungen hat.
Obwohl diese Erweiterung gut geeignet ist, um den Farbkontrast zu überprüfen, gibt es auch einige Nachteile. Beispielsweise ist der WCAG Color Contrast Checker nicht in der Lage, alle Elemente zu bewerten. Es gibt viele, die diese Erweiterung nicht überprüfen kann, wie z. B. Text in Hintergrundbildern oder Shadow Root-Elementen. In diesen Fällen ist eine manuelle Überprüfung durch einen ausgebildeten Zugänglichkeitsspezialisten unerlässlich.