Die Grenzen automatischer Barrierefreitstests: Farbkontraste

Das Thema Barrierefreiheit lässt uns nicht los - Test Tools für Barrierefreiheit schießen derzeit aus dem Boden. Aber können sie halten, was sie versprechen? 

Jein ... hier am Beispiel von Farbkontrasten sehen wir, wo Tools an Grenzen stoßen. Joomla selbst und Cassiopeia bieten eine solide Grundlage und helfen dabei, die Empfehlungen der WCAG 2.2 AA umzusetzen. Aber: Template-Designer, Erweiterungsentwickler oder auch Redakteure können jederzeit alles aushebeln.
Werkzeuge wie WAVE, AXE oder Lighthouse gehören für viele Webentwickler schon zum Standardrepertoire.
Aber hier kommt der Haken: Diese Tools analysieren den DOM nach dem Laden der Seite und beziehen CSS mit ein – aber sie wissen nicht, welche Tricks Template-Designer anwenden, um ihre Seite schöner und lebendiger zu machen.
Deshalb gilt: Deine Expertise ist gefragt, ganz egal, was die automatischen Checker über deine Seite sagen.

Ein paar Beispiele zeigen, wo automatisierte Tools beim Farbkontrast Probleme haben. Die Tests wurden unter Windows 11 mit verschiedenen Browsern durchgeführt – andere Tools oder Systeme können zu abweichenden Ergebnissen führen.

Welche Tools verwenden wir hier?

Nur kostenlose, frei verfügbare Browser Add-ons ohne Registrierung und ohne KI-Unterstützung. Auf Win11, in verschiedenen Browsern.
WAVE, Lighthouse, AXE Checker, Developer Tools 
Eine englische Beschreibung gibt es hier: https://magazine.joomla.org/all-issues/october-2020/a-first-approach-to-accessibility-testing.
IBM Equal Access Accessibility Checker
Das ist ein hervorragendes Tool, das sehr detaillierte Ergebnisse liefert - oft so detailliert, dass es eher für Entwickler ratsam ist.
 
Das Joomla accessibility checker plugin kann auch im Frontend aktiviert werden, und es gibt jede Menge weiterer Tools für jeden Geschmack und Geldbeutel im Internet.   
Wir wollen hier einen der häufigsten Verstöße gegen Barrierefreiheit prüfen, den Farblkontrast,  und sehen, wie zuverlässig die Tools bei der Erkennung dieses Fehlers sind:

Test auf Farb-Kontraste?

Eigentlich ist es sehr einfach: Ein Tool berechnet die Luminanz von Hintergrund-Farbe und Schriftfarbe und errechnet den Kontrast mit einer einfachen Formel. Der Kontrast muss >=4.5 sein.
Hier ist eine kleine Testseite und auf den ersten Blick sieht man überall schlechte Kontraste, dazu  brauchen wir kein Tool. Aber - Überraschung - Die Test Tools sehen nur den Fehler auf der ersten Box! Die anderen Fehler finden sie gar nicht oder nicht sicher.

Box 1: 
Schwacher Kontrast: {color: white; background-color: lightgray; }
Diesen Fehler erkennt jedes Tool.
Box 2: 
Eine Grafik: Tools können nicht erkennen, dass darauf ein Text mit schwachem Kontrast ist.
Box 3:
Guter Kontrast: {color: white; background-color: black; }
Mit Klick auf den Button ändert javascript die Hintergrund-Farbe zu weiss. Das kann kein Tool erkennen.
Box 4:
Guter Kontrast: {color: white; background-color: black; }
Die  css Anweisung: background-image: linear-gradient(to right, #ffd05f, #feb47b) schiebt ein Hintergrundbild zwischen Background und Text.
Das erkennen die Tools nicht zuverlässig. Nur zwei Tools melden, dass da was verdächtig ist.
Box 5:
Guter Kontrast: {color: white; background-color: darkgreen; }
Auf dieser Box war ein guter Kontrast. Aber es gibt noch eine css Anweisung:
background: darkgreen;  opacity: 0.4; Damit ist der Kontrast ruiniert.
Immerhin: Zwei Tools erkennen diesen Fehler und geben eine Warnung aus. 
Box 6:
Guter Kontrast: {color: white; background-color: darkgreen; }
Auch hier erkennen Tools keinen Fehler. Aber bei hover ändert sich die background-Farbe:
:hover { background-color: lightblue;}

Das Ergebnis ist ernüchternd: 1 von 6 Fehlern wurde von allen Tools erkannt. Und das nur bei einer simplen Regel für Farbkontraste und bei einer ganz einfachen, völlig normalen Mini-Test-Seite. Fazit: Ohne deine Expertise geht es nicht, auch nicht beim Test auf Barrierefreiheit.

Was kannst du tun?

Schalte das Plugin Jooa11y von Joomla an, auch fürs Frontend - natürlich nur, solange die Seite nicht freigegeben ist.
Prüfe alle Grafiken, ob sie kontrastarmen Text zeigen (und korrigiere sie, wenn der Text wichtig ist).
Führe alle Aktionen auf der Seite aus und beobachte, ob sich Farbkontraste ändern
Provoziere (Fehler)meldungen und beobachte die Farbkontraste
Beobachte Farbkontraste wenn sich beim Erhalt des focus oder beim hover etwas ändert.

Dieser Artikel basiert auf einem im Joomla Magazine bereits erschienenen Beitrag https://magazine.joomla.org/all-issues/may-2025/blind-spots-of-accessibility-testing-tools-colour-contrast.