Da das Interesse an Web-Accessibility wächst, entwickeln wir im Rahmen unserer Accessibility-Diagnoseservices Tools, die die Diagnose „einfacher und verständlicher“ machen.
Als erster Schritt wurde die Chrome-Erweiterung „Area Contrast Checker“ veröffentlicht.
Hintergrund der Entwicklung
Herkömmliche Kontrastprüfer lassen sich grob in drei Typen einteilen, die jeweils ihre Vor- und Nachteile haben.
- Automatischer Scan
Da die Seite maschinell als Ganzes ausgelesen wird, ist dieser Ansatz effizient. Bei Hintergründen mit Bildern oder Verläufen kommt es jedoch leicht zu Fehlalarmen oder übersehenen Problemen. - Pipetten-Tool
Die Farbe wird exakt so gemessen, wie sie erscheint. Da jeder Punkt einzeln manuell erfasst werden muss, ist der Arbeitsaufwand jedoch hoch. - Elementbasierte Auswahl
Da HTML- und CSS-Informationen direkt ausgelesen werden, ist die Methode einfach. Bilder können jedoch nicht geprüft werden, und Überlappungen oder Transparenzen werden unter Umständen nicht korrekt als tatsächlicher Renderzustand erfasst.
Die Entwicklung begann aus einem Gedanken, der im Arbeitsalltag entstand: Gibt es nicht eine Methode, die einfach ist, präzise arbeitet und überall funktioniert?
Ein bisher unbekannter vierter Ansatz
Die Lösung dafür ist die „Bereichsanalyse“ – ein vierter Ansatz, den wir im Area Contrast Checker umgesetzt haben.
Umrahmen Sie den gewünschten Bereich per Ziehen mit der Maus. Die Pixel innerhalb dieses Bereichs werden analysiert, und die Hintergrund- und Vordergrundfarbe werden automatisch erkannt. Da das geprüft wird, was Nutzer tatsächlich sehen, spielen Überlagerungen von Elementen keine Rolle – auch Bildinhalte lassen sich so prüfen.
Markieren Sie einfach die betreffende Stelle, um sie schnell und unkompliziert zu prüfen.
Hauptfunktionen
▪️Bewertung nach WCAG 2.1 / 2.2
Auf Grundlage der Erfolgskriterien 1.4.3, 1.4.6 und 1.4.11 bewertet das Tool das Kontrastverhältnis für normalen Text (AA: 4,5:1, AAA: 7:1), großen Text (AA: 3:1, AAA: 4,5:1) und UI-Komponenten (AA: 3:1).
▪️Unterstützung des nächsten Standards APCA
Unterstützt APCA (Accessible Perceptual Contrast Algorithm), einen neuen Kontrastmaßstab, der im Entwurf von WCAG 3.0 diskutiert wird. Zeigt sofort an, bis zu welcher Schriftgröße die Anforderungen erfüllt werden (Lc-Wert).
▪️Farbvorschläge mit erhaltenem Farbton
Wenn das Kontrastverhältnis nicht ausreicht, schlägt das Tool ähnliche Farben vor, die die Anforderungen erfüllen und dabei den Farbton (Hue) der ursprünglichen Farbe beibehalten.
▪️Erweiterte Funktionen für Profis
Unterstützt die Farbformate HEX, RGB und HSL.
Wenn Sie das automatisch erkannte Ergebnis feinjustieren möchten, können Sie die Farbe pixelgenau mit der Pipette neu auswählen.
Verfügbar in Japanisch und Englisch.
Area Contrast Checker hier herunterladen
Bei Liberogic verfolgen wir das Ziel, Barrierefreiheit nicht als „Sonderlösung“, sondern als selbstverständlichen Qualitätsstandard zu etablieren.
Aus unserer Arbeit in der Webentwicklung und bei Accessibility-Prüfungen haben wir viele Wünsche gesammelt – diese haben wir in dieses Tool eingebracht. Wir werden auch künftig schrittweise weitere Tools veröffentlichen, die Accessibility noch greifbarer und die Arbeit damit reibungsloser machen. Wir freuen uns auf Ihr Feedback.
