Ein Überblick über drei Tools und Techniken zum Testen und Verifizieren barrierefreier Farbkontraste Ihres Designs.
Angenommen, Sie haben Text auf hellem Hintergrund, zum Beispiel:
Auch wenn Sie vielleicht alle Beispiele gut lesen können, ist dies nicht bei allen Nutzern der Fall.
Der zugängliche Farbkontrast sorgt dafür, dass Text für alle lesbar ist. Manchmal ist das Testen von Kontrasten einfach und manchmal wirklich schwierig. Am Ende dieses Beitrags lernen Sie drei neue Tools und Techniken zur Untersuchung, Korrektur und Überprüfung des Kontrasts Ihres Webdesigns kennen, damit Sie auch schwierige Szenarien meistern können.
WCAG und Farbkontrast
Die Web Accessibility Initiative des W3C umfasst Strategien, Standards und Ressourcen, die dafür sorgen sollen, dass das Internet für möglichst viele Menschen zugänglich ist. Den Standards zugrunde liegen die Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG). Die neueste stabile Version WCAG 2.1 deckt eine wichtige Anforderung an die Barrierefreiheit ab: Mindestkontrast.
Die Beziehung zwischen zwei Farben in WCAG 2.1 wird durch ihr Kontrastverhältnis beschrieben, d. h. den Wert, den Sie erhalten, wenn Sie die Leuchtdichte zweier Farben vergleichen. Die Luminanz gibt an, wie nahe eine Farbe an Schwarz (0%) oder Weiß (100%) liegt. Die WCAG definiert einige Regeln und Berechnungsalgorithmen, die festlegen, welches Kontrastverhältnis für die Zugänglichkeit des Webs erforderlich ist. Es gibt jedoch bekannte Probleme bei dieser Berechnung. Irgendwann wird ein noch zuverlässigerer Weg eingeführt, aber derzeit ist die WCAG die beste, die wir haben.
Wie lauten die Regeln?
Ein höheres Kontrastverhältnis wird mit einer höheren Zahl bewertet, z. B. 4,5 oder 7 statt 3. Um sich mit der Bewertungstabelle vertraut zu machen, können Sie den Contrast Checker von Polypane nutzen.
Kontrast zwischen Farben testen
Nachdem wir nun wissen, wonach wir suchen, wie können wir das testen? Hier findest du drei kostenlose Tools, die dir dabei helfen, den Kontrast auf deiner Website zu prüfen, zu korrigieren und zu messen. Sie erhalten einen Überblick über die jeweiligen Stärken und Schwächen, damit Sie die Zugänglichkeit der Farben und Inhalte Ihrer Website auf unterschiedliche Weise testen können.
- Pika
Eine macOS-App, die auf einzigartige Weise den Kontrast von Farben auf dem gesamten Bildschirm, Farben für Farbverläufe, Farben mit Transparenz und vieles mehr anzeigen kann. Die Absicht ist anstößig. Nutzer wählen die Pixel, die sie vergleichen möchten, manuell aus. Etwas weniger automatisiert, mit einem enormen Featurezuwachs. - VisBug
Browserübergreifende Erweiterung, mit der mehr als ein Kontrast-Overlay gleichzeitig angezeigt werden kann, aber wie bei den Entwicklertools manchmal kein Intent erkannt wird. - Chrome-Entwicklertools
Die Entwicklertools sind in Chrome integriert und bieten eine Vielzahl von Möglichkeiten, um Farbprobleme zu untersuchen, zu korrigieren und zu beheben. Bei der Prüfung von Farbverläufen und halbtransparenten Farben gibt es jedoch Schwächen und manchmal können keine Intents erkannt werden.
Pika (macOS-Anwendung)
Wenn DevTools oder VisBug den Kontrast nicht richtig bewerten können, z. B. wenn Sie eine Farbe außerhalb des Browsers testen müssen oder wenn Transparenz oder Farbverläufe verwendet werden, ist Pika hier, um die Sache zu retten. Pika hat Zugriff auf jedes Pixel auf dem Bildschirm, weil sie ein Systemtool und kein Webtool ist.
Das bedeutet auch, dass sich die UX für die Verwendung von Pika von den Entwicklertools oder VisBug unterscheidet. Die Entwicklertools und VisBug versuchen, die Text- und Hintergrundfarben aus dem DOM des Browsers anzuzeigen, während die von Pika verglichenen Farben von jedem Punkt auf dem Bildschirm manuell ausgewählt werden. Dies gibt Pika mehr Kontrolle und führt zu einigen weiteren Anwendungsfällen:
- Wenn Sie zwei Farben vergleichen, unabhängig davon, ob sie sich im Browser befinden oder nicht, können Sie sie testen, wenn sie auf dem Bildschirm angezeigt werden.
- Transparenz beim Vergleich von Farben.
- Farben innerhalb von Farbverläufen vergleichen.
- Farben vergleichen, in denen Mischmodi verwendet werden, z. B. der Mischmodus in CSS.
Zwei Farben vergleichen
So vergleichen Sie Text mit einer Hintergrundfarbe:
Strich- und Füllfarben von Vektorgrafiken vergleichen:
Farben mit Transparenz vergleichen
Vergleichen Sie die Textfarbe mit einer Vielzahl von Beispielpixeln für den Hintergrund. Hier wird das hellste Grau des Mattglas-Effekts als Vergleichsfarbe für den Hintergrund verwendet.
Farben mithilfe von Farbverläufen vergleichen
Text in einem Farbverlauf oder auf einem Bild vergleichen. Hier wird das L aus "Lasso" mit dem Hellblau des Bildes verglichen:
VisBug
VisBug ist ein von FireBug inspiriertes Tool, mit dem Designer und Entwickler ihr Website-Design visuell prüfen, debuggen und ausprobieren können. Die Einstiegsbarriere sind geringer als bei den Chrome-Entwicklertools, da die Benutzeroberfläche und UX der Designtools, die die Leute kennen und gerne verwenden, nachgeahmt werden.
Probiere VisBug aus oder installiere die App unter Chrome, Firefox, Edge, Brave oder Safari.
Eines der angebotenen Tools ist das Tool „Accessibility Inspect“.
Browserübergreifend und sogar auf Mobilgeräten prüfen
Sobald auf das Accessibility Inspect-Tool geklickt wurde, werden in der Kurzinfo alle Informationen zur Barrierefreiheit für alle Inhalte angezeigt, auf die der Nutzer zeigt oder auf die die Tastatur navigiert. Diese Kurzinfo enthält Farbvergleiche zwischen erkannten Vorder- und Hintergrundfarben.
Eine oder mehrere prüfen
Entwicklertools können entweder ein einzelnes Farbpaar untersuchen oder einen Bericht über alle Ihre Farbpaare auf der Seite abrufen, aber VisBug bietet einen schönen Mittelweg, da er mehrere Farbpaare zulässt. Wenn Sie auf ein Element klicken, bleibt die Kurzinfo sichtbar. Halten Sie die Umschalttaste gedrückt und klicken Sie weiter auf andere Elemente, um alle Kurzinfos zu sehen:
Dies ist besonders wichtig für komponentenbasiertes Design, bei dem mehrere Teile einer Komponente die Kontrastverhältnisse bestehen müssen. Mit dieser Methode können Sie alle diese Komponenten auf einmal sehen. Ideal auch für Designrezensionen.
Chrome-Entwicklertools
Wenn Sie Chrome installiert haben, stehen Ihnen bereits viele Tools zum Testen von Kontrasten zur Verfügung:
- Die Farbauswahl
- Kurzinfo zur Prüfung
- Übersicht über Preisvergleichsportale
- Leuchtturm
- JS-Konsole
- Emulationstools für Farbenblind
- Emulation für Systemfarbkontrasteinstellungen
- Test mit WCAG 3.0 APCA
Farbauswahl in den Chrome-Entwicklertools
Im Bereich „Stile“ der Chrome-Entwicklertools des Steuerfelds „Elemente“ wird neben Farbwerten ein kleines visuelles quadratisches Farbmuster angezeigt. Wenn Sie auf dieses Muster klicken, sehen Sie das Farbauswahl-Tool. Wenn möglich, wird in der Mitte des Tools der Kontrast der Farbe zu einem Vorder- oder Hintergrund angezeigt.
Im folgenden Beispiel wird die Farbauswahl für einen Farbwert einer benutzerdefinierten Eigenschaft geöffnet. Der Kontrastverhältniswert wird mit 15,79 gemeldet und hat zwei grüne Häkchen, die anzeigen, dass der Wert die Anforderungen von AA und AAA WCAG 2.1 erfüllt:
Autokorrektur für die Farbauswahl
Es ist praktisch, beim Auswählen von Farben die Punktzahl zu sehen, aber die Chrome-Entwicklertools bieten eine zusätzliche Autokorrekturfunktion. Wenn die Farbauswahl einen nicht zugänglichen Farbkontrastwert meldet, kann sie erweitert werden, um die AA- und AAA-Werteziele sowie eine Pipette anzuzeigen. Neben AA und AAA befinden sich Muster und ein Aktualisierungssymbol. Wenn Sie darauf klicken, wird die nächstgelegene weitergegebene Farbe für Sie angezeigt:
Wenn Sie nicht wählerisch sind, können Sie mit der Autokorrektur die Richtlinien für die Barrierefreiheit erfüllen und sich nicht allzu sehr anstrengen, um die Aufgabe zu erledigen.
Kurzinfo zur Prüfung
Das Tool zur Elementauswahl hat eine spezielle Funktion, mit der allgemeine Informationen zu Schriftart, Farbe und Bedienungshilfen angezeigt werden, wenn der Mauszeiger auf die Seite bewegt wird. Das Tool zur Elementauswahl ist das Symbol auf der linken Seite im folgenden Screenshot. Das ist das Feld mit einem Pfeil
über der rechten unteren Ecke. Er kann auch mit dem Hotkey Control+Shift+C (oder Command+Shift+C unter macOS) ausgewählt werden.
Nach der Aktivierung wird das Symbol blau und wenn Sie auf einen beliebigen Bereich der Seite verweisen, wird die folgende Kurzinfo zur schnellen Überprüfung angezeigt:
Anstelle der Farbauswahl, bei der Sie das Farbmuster im Bereich „Stile“ suchen müssen, können Sie mit diesem Tool einfach über die Seite zeigen, um Kontrastwerte zu sehen. Wie die Farbauswahl kann auch hier immer nur ein Kontrastwert angezeigt werden.
Bump soweit, bis du schläfst 👀
Oft überprüfe ich ein Farbpaar, das das erforderliche Seitenverhältnis erreicht. Anstatt die Autokorrekturfunktion der Farbauswahl zu verwenden (weil ich wählerisch bin), passe ich Farbkanäle im CSS an und beobachte, bis ich das benötigte Seitenverhältnis erreicht habe. Ich nenne diesen Prozess Bump bump til you pass, weil ich Farbkanalnummern so lange ansteige, bis sie WCAG 2.1 bestehen.
Die folgenden Schritte müssen genau in der angegebenen Reihenfolge ausgeführt werden:
- Legen Sie den Tastaturfokus innerhalb einer Farbe im Steuerfeld „Stile“ fest.
- Aktivieren Sie das Tool zum Untersuchen von Elementen mit der Tastenkombination
Control+Shift+C(oderCommand+Shift+Cunter macOS). - Bewegen Sie den Mauszeiger auf ein Ziel.
- Drücken Sie die Nach-oben-/Nach-unten-Taste auf der Tastatur, um die Zahlen für den Farbwert zu ändern.
Das funktioniert, weil der CSS-Stilwert weiterhin den Tastaturfokus hat, während Sie mit der Maus auf ein Ziel zeigen können. Achten Sie darauf, nicht auf das Ziel zu klicken, da sich der Fokus sonst vom Farbwertbereich bewegt und Sie die Werte erst wieder verschieben können, wenn sie wieder fokussiert sind.
Übersicht über Preisvergleichsportale
Bisher haben wir in den Chrome-Entwicklertools Möglichkeiten zum Betrachten einzelner Farbpaare gegeben. In der CSS-Übersicht kann jedoch Ihre gesamte Seite gecrawlt werden und alle nicht zugänglichen Kopplungen werden gleichzeitig angezeigt:
Weitere Informationen zu dieser Funktion finden Sie in diesem Beitrag CSS-Übersicht: Potenzielle CSS-Verbesserungen erkennen. In der Serie „Entwicklertools-Tipps von Jecelyn Yeen“ auf YouTube wird erklärt, wie Sie über den Bereich „CSS-Übersicht“ potenzielle CSS-Verbesserungen erkennen.
Leuchtturm
Lighthouse ist ein weiteres Auditing-Tool in den Chrome-Entwicklertools. Die Funktion kann Ihre Seite crawlen und nicht zugängliche Farbpaare melden. Sie enthält winzige Screenshots aller Farbpaare, die Sie überprüfen können, ob Sie bestanden haben oder nicht. Fehlgeschlagene Kombinationen wirken sich negativ auf Ihren Lighthouse-Wert aus.
Diese Ergebnisse können wie folgt aussehen:
Die JS-Konsole
Vielleicht sind die bisher aufgeführten Tools einfach nicht da, wo Sie sind. Wo Sie sich gerade befinden (ganztägig) ist beispielsweise JavaScript. Hier ist ein Experiment. Im Bereich „Probleme“ der Konsole können während der Erstellung ständig Probleme mit der Barrierefreiheit mit Farbkontrasten gemeldet werden. Aktivieren Sie die Funktion unter „Einstellungen“ > „Tests“, wie hier gezeigt:
Öffnen Sie dann den Bereich „Problem“ und sehen Sie nach, ob es gefunden wurde. Ist dies der Fall, können sie so aussehen:
Farbblind-Emulation
Beim Thema Farbkontrast und barrierefreie Farbkopplungen möchte ich auf das Tool zur Emulation für Sehschwächen hinweisen. Dadurch werden die Farben oder das Erscheinungsbild Ihres Designs geändert, um die Ergebnisse verschiedener Varianten von Farbenblindheit zu demonstrieren. So haben Sie die Möglichkeit, Ihr Design so zu ändern, dass Farbe nicht die einzige Möglichkeit ist, wie UX für Nutzende kommuniziert.
Es ist keine sichere Barrierefreiheitspraxis, nur Farben zur Darstellung von Informationen zu verwenden, z. B. Rot für schlecht und Grün für Gutes. Manche Menschen sehen Grün- und Rottöne nicht so, aber dieses Emulationstool hilft Ihnen, das zu erleben und sich daran zu erinnern.
Emulation der Farbkontrastsystempräferenz
Immer mehr Nutzer ändern die Kontrasteinstellungen in ihrem Betriebssystem und geben ihnen die Möglichkeit, in der Benutzeroberfläche weniger oder mehr Kontraste anzufordern. CSS kann diese Einstellung nutzen, genau wie bei Einstellungen für helles oder dunkles Design. Mit den Chrome-Entwicklertools können Sie diese Einstellung emulieren, sodass Designs getestet und an die Nutzeranfrage angepasst werden können, ohne die Einstellung im System zu ändern.
WCAG 3.0 APCA testen
Ein weiteres Experiment, das Sie ausprobieren können, ist das Testen Ihrer Farbpaare mit dem experimentellen APCA-Farbverhältnis-Bewertungssystem. Wird über „Einstellungen“ > „Tests“ aktiviert, ersetzt es das Verhältnissystem WCAG 2.1 durch einen neueren und verbesserten Algorithmus zur Kontrastprüfung. So können Sie sich eine Vorschau der Ergebnisse anzeigen lassen, während das Angebot auf einen Standard hinarbeitet.
Nach der Aktivierung können Sie die Kurzinfo zur Punktprüfung oder die Farbauswahl verwenden, um den Farbpaar-Wert zu sehen und zu sehen, ob er bestanden wird:
Fazit
Farbkontraste sind ein wichtiges Puzzleteil des Puzzles für die Barrierefreiheit im Web. Wenn dieser Farbkontrast eingehalten wird, wird das Web für möglichst viele Menschen in den unterschiedlichsten Situationen besser nutzbar. Hoffentlich helfen Ihnen diese drei Tools, die richtige Farbauswahl zu treffen.