Farbkontraste auf Barrierefreiheit testen

Wir leben in einer Welt, in der die vollständige Abwesenheit körperlicher Einschränkungen eher die Ausnahme ist, als die Norm. Nicht zuletzt deshalb sollten Lesbarkeit, Benutzbarkeit und Barrierefreiheit für modernes Webdesign keine Fremdworte, sondern zentrale Bestandteile von Planung, Konzeption und Design sein.

Einfacher Test für Farbkontraste

Die Website WhoCanUse.com versucht genau hier anzusetzen und stellt ein einfaches Werkzeug zum Analysieren von Farbkontrasten und Lesbarkeit bereit. Zum Untersuchen einer Farbkombinationen sind nur die zwei verwendeten Farb-Codes nötig.

Screenshot von whocanuse.com. Das Interface zeigt zwei Eingabefelder für Farbwerte.

Als Beispiel für diese Analyse habe ich mir eine Farbkombination ausgesucht, die so vielleicht in unserem neuen Theme für KrautPress.de zum Einsatz kommen wird.

Screenshot der Ergebnisse auf whocanuse.com: Der Kontrast der getesteten Farben liegt bei 6,31:1.

Gleich auf Anhieb schafft mein Beispiel-Farbset es auf ein gutes AA-Rating nach den Web Content Accessibility Guidelines (WCAG). In einer Liste werden nicht nur die verschiedenen Arten von Fehlsichtigkeiten aufgelistet, die vom Test abgedeckt sind, sie werden auch jeweils von einer kleinen Darstellung flankiert, die den Eindruck der gewählten Farbkombination mit der jeweiligen Fehlsichtigkeit simulieren soll.

Screenshot weiterer "vorübergehender" technischer Einschränkungen.

Zusätzlich zu medizinischen Problemen werden auch die Darstellung unter direkter Sonneneinstrahlung und Farbveränderungen durch einen Display-Night-Mode berücksichtig.

Lesbarkeit überprüfen

Neben dem Kontrast-Test der beiden angegeben Farben können auf der Seite auch noch Schriftgröße und Schriftschnitt angegeben werden, weil die Lesbarkeit von Text natürlich von diesen Werten beeinflusst wird. Sobald ich die Schriftgröße vom Standardwert 20px auf 24px erhöhe, erhält meine Kombination die Bestnote AAA.

Für das neue KrautPress-Theme bedeutet das, dass wir besonderen Wert auf den Einsatz ausreichend großer Schriften legen werden.

2 Kommentare

  1. Hallo Simon,
    was hältst du vom „WAVE Evaluation Tool“ im Firefox? Das bewertet auch den Farbkontrast, darüber hinaus aber auch die Struktur der Seite.
    Ich würde auch das Plugin „WP Accessibility“ erwähnen, mit dem ebenfalls der Farbkontrast getestet werden kann und welches eingeschränkten Nutzern zusätzliche Optionen bietet.

Schreibe einen Kommentar zu oekoplatt Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.