Testen der Barrierefreiheit des Farbkontrasts

Die Regeln für barrierefreie Internetseiten schreiben vor, dass Texte und Bilder so gestaltet werden müssen, dass sie auch von Menschen mit Sehbehinderungen gut gesehen werden können. Die Anforderungen an den Farbkontrast galten nur für Text und Bilder von Text. In den neuen Richtlinien, Version 2.1, gelten die Kontrastanforderungen auch für Teile der Benutzeroberfläche. Dazu gehören auch die Zustände, in denen ein Element gerade aktiv ist. Außerdem gelten die Anforderungen für Bilder und Symbole.

Werkzeuge zur Überprüfung des Farbkontrasts

Ich zeige Ihnen zwei wichtige Tools zur Überprüfung des Farbkontrasts. Das sind der automatisierte Test der Deque-Browsererweiterung und der Deque Online-Farbkontrastanalysator für den manuellen Vergleich zweier Farbwerte. Ich zeige Ihnen auch, wie Sie die Chrome-Pipette nutzen können. Der Farbkontrastalgorithmus ist in die Deque-Browsererweiterungen integriert. Wenn das Tool Probleme mit dem Farbkontrast findet, können Sie die Beschreibung selbst kopieren und in ein Bug-Tracking-Ticket einfügen. Nicht jedes Farbkontrastproblem, das bei der automatischen Überprüfung festgestellt wird, ist ein Verstoß.

Diese CSS-Schicht ist deaktiviert. Das ist eine Ausnahme, die nach den Richtlinien für den Farbkontrast zulässig ist. Das Tool kann das aber nicht wissen. Sie müssen es deshalb manuell testen. Wenn Sie das Flaggensymbol sehen, müssen Sie die Probleme manuell überprüfen. Die Browsererweiterung zeigt an, welche Verstöße es gibt. Sie müssen die Probleme mit dem Farbkontrast dann beheben. Bitte melden Sie das. Als Nächstes filtern Sie nach “Überprüfung erforderlich”, um den Rest der Probleme anzuzeigen.

Das muss manuell überprüft werden. Klicken Sie auf den Button in der Erweiterung, um das Element anzusehen. Wenn Sie nur einen einfachen Fall haben, können Sie diesen im Online-Farbkontrast-Analysator von Deque analysieren. Klicken Sie dazu in der Browsererweiterung auf “Mehr erfahren”. Kopieren Sie die Werte aus der Browsererweiterung in den Online-Farbkontrastanalysator.

Dieses Tool zeigt an, ob der Text passt oder nicht. Großer Text ist definiert als 24 Pixel oder mehr, oder wenn der Text fett ist, als 19 Pixel oder mehr. Das Tool zeigt an, ob die Richtlinien erfüllt sind oder nicht. Level AA ist der Standard, den die meisten Organisationen verwenden. Level AAA ist ein höherer Standard mit mehr Farbkontrast. Sie können mit den Schiebereglern spielen, um eine bessere Kombination auszuwählen. Sie können diese Farbwerte dann in Ihren Bericht aufnehmen.

Komplexe Hintergrundfarben

In komplizierteren Fällen, wie z. B. bei Hintergrundbildern und Farbverläufen, müssen Sie eine Pipette verwenden, um verschiedene Farbkombinationen zu erfassen und zu analysieren. In Chrome gibt es ein Pipetten-Werkzeug im CSS-Panel. Um es zu nutzen, öffnen Sie die Registerkarte “Elemente” in den Entwicklertools. Wählen Sie ein Element aus, dessen Farbe im CSS angegeben ist. Klicken Sie dann auf das Farbfeld im CSS-Panel. So wird der Mauszeiger zu einer Pipette. Klicken Sie mit der Maus auf die Farbe, die Sie analysieren möchten. Kopieren Sie den Hex-Code und fügen Sie ihn in den Online-Farbkontrastanalysator ein. Analysieren Sie auch einige Hintergrundfarben.

Analysieren Sie die kritischsten Farbkombinationen. Wenn eine Kombination nicht funktioniert, müssen Sie die anderen nicht testen, da das gesamte Element dann nicht funktioniert. Man kann die Pipettenmethode auch für Textbilder verwenden, um zu testen, wie gut der Farbkontrast ist. Es ist nicht einfach, eine genaue Farbe zu finden. Wählen Sie die Farbe aus den einfarbigen Bereichen und nicht aus den Übergangsfarben.

Testen des Farbkontrasts von Komponenten der Benutzeroberfläche

Ab Version 2.1 müssen Komponenten der Benutzeroberfläche ein Kontrastverhältnis von drei zu eins erfüllen. Das entspricht dem gleichen Verhältnis, das für größeren Text erforderlich ist. Die UI-Komponenten müssen so gestaltet werden, dass sie sich vom Hintergrund und den angrenzenden Elementen der Benutzeroberfläche abheben. Dadurch können die Benutzer die Komponenten einfacher erkennen. Die Deque-Browsererweiterung testet derzeit keine UI-Komponenten. Sie müssen sie manuell testen. Vergleichen Sie die Farbe des Hintergrunds mit der Farbe der Komponente. Wenn die Komponente einen Rahmen hat, vergleichen Sie die Farbe des Rahmens mit dem Hintergrund.

Testen der Hover- und Fokuszustände von Komponenten der Benutzeroberfläche

Ab Version 2.1 der Richtlinien müssen auch die Farben von UI-Komponenten zueinander kontrastieren. Das heißt aber nicht, dass jeder Zustand mit jedem anderen kontrastieren muss. Die Farben des Standardzustandes müssen nicht mit den Farben des aktiven Zustandes kontrastieren. Das heißt, dass jeder Zustand die Kontrastrichtlinien für die Farben auf dem Bildschirm erfüllen muss, solange er aktiv ist. Sie müssen dreimal testen: einmal im Standardzustand, einmal im Fokus und einmal imhover. Gehen Sie in den Entwicklertools des Browsers zur Registerkarte “Elemente”. Wählen Sie im Bereich “Styles” den Hover-Zustand aus, der mit ":hov" beginnt. Wählen Sie dann einen Zustand aus, den Sie testen möchten. Es gibt zwei Zustände: “Hover” und “Fokus”. Testen Sie jeden einzeln. Wenn Sie hier “Hover” oder “Fokus” auswählen, zeigt der Browser die UI-Komponente in diesem Zustand an. So können Sie die Farben testen, ohne die Maus bewegen zu müssen. Sie können den Mauszeiger-Zustand für ein oder mehrere Elemente gleichzeitig aktivieren. Dann können Sie die automatisierten Browsererweiterungstests erneut ausführen. Tun Sie dasselbe für die verschiedenen Fokus-Zustände auf der Seite. Oder Sie kopieren die Werte und fügen sie ein oder verwenden die Pipette.

Testen Sie den Kontrast von grafischen Objekten

In den Richtlinien für grafische Objekte, die eine Bedeutung vermitteln, wie z. B. Grafiken oder Menüsymbole, steht, dass sie im Verhältnis drei zu eins sein müssen. Dekorative oder redundante Grafiken müssen die Farbkontrastrichtlinien nicht erfüllen. Wie schon gesagt, fügen Sie die CSS-Werte entweder selbst ein oder nutzen Sie die Funktion, um den Farbkontrast zu bestimmen.

Ausnahmen, für die keine Tests erforderlich sind

Es gibt bestimmte Ausnahmen von den Farbkontrastregeln. Dazu gehören Bilder, die nur zur Dekoration da sind, oder Bilder, die mit dem Text übereinstimmen. Auch deaktivierte Formularelemente, die vom Browser selbst ausgegraut werden, Logos und Logos sowie grafische Objekte, bei denen der geringe Kontrast für die vermittelten Informationen wichtig ist, sind davon betroffen. Zusammenfassend lässt sich sagen, dass der Farbkontrast eine Voraussetzung ist. Sie können ihn mit der Deque-Browsererweiterung testen. Sie können auch die Chrome-Pipette in den Entwicklertools verwenden, um die Farben zu finden. Getestet werden müssen Text und UI-Komponenten, also Elemente, die auf einer Webseite verwendet werden. Dazu gehören auch der Standardzustand, der Hover-Zustand und der Fokus-Zustand. Außerdem werden grafische Objekte getestet.