Tools für barrierefreie Farbkontraste

Das Online Werkzeug Color.review unterstützt Designer bei der Auswahl von ausreichend kontrastreichen Farbenkombinationen. Die Auswahl wird in einem sehr ansprechendem Text- und Illustrationsbeispiel darunter visualsiert. Aber viel wichtiger sind die angezeigten Linien im Farbfeld. Sie markieren die Kontrastgrenzen 1:3, 1:4,5 und 1:7 wie sie in der WCAG definiert sind. Mithilfe der Linien sieht man wie weit weg man noch von einer validen Farbkombination ist. Sehr hilfreich!

Der Colour Contrast Analyser von The Paciello Group ist eines der vielseitigsten Werkzeuge. Mit der App für Mac und Windows kann man mit einer Farbpipette beliebige Farbwerte auf dem Bildschirm testen. Damit lässt sich so ziemlich alles testen: egal welches Programm oder Format, es muss nur am Bildschirm angezeigt werden können.

Das Online-Werkzeug contrast-ratio.com von Lea Verou ist gut geeignet um zwei Werte einfach zu testen: klein, übersichtlich und es benötigt keine Installation.

Das Online-Werkzeug Accessible color palette builder hilft Designern die barrierefreie Farbkombinationen aus einer Palette von Farben zu finden. Das ist praktisch, wenn man den Styleguide entwickelt. Hat man die Palette zusammengestellt, speichert man sich einfach die URL.

Vor allem Web Entwickler*innen schätzen es Farbkontraste direkt in den Developer Tools im Browser prüfen zu können.
Im Chrome Developer Tool werden beim Elemente-Auswählen-Werkzeug  Schlüsselwerte des Elements mit angezeigt; darunter auch ob der Farbkontrast zum Hintergrund ausreichend ist.

Es gibt diverse Plugins und Erweiterungen für die jeweiligen Grafikprogramme. Stark-Plugin gibt es sowohl für Sketch, Figma und Adobe XD.

Wenn man in einem System arbeitet, in dem es nicht erlaubt ist, Software oder Plugins zu installieren, kann eine Alternative sein, ein sog. Bookmarklet zu nutzen.

WebAIM Contrast Checker Bookmarklet wird im Browser ausgeführt und muss nicht installiert werde. Einmal geöffnet, kann mit der Pipetten-Funktion (auf das Farbfeld klicken) ein beliebiger Farbwert auf dem gesamten Bildschirm abgegriffen werden.