Eine Übersicht über drei Tools und Techniken zum Testen und Verifizieren des barrierefreien Farbkontrasts Ihres Designs.
Angenommen, Sie haben Text auf einem hellen Hintergrund, z. B. so:
Auch wenn alle Beispiele für Sie lesbar sind, ist dies nicht für alle Nutzer der Fall.
Ein barrierefreier Farbkontrast sorgt dafür, dass Text für alle gut lesbar ist. Manchmal ist es einfach, den Kontrast zu testen, und manchmal ist es wirklich schwierig. Am Ende dieses Beitrags werden Sie drei neue Tools und Techniken kennen, mit denen Sie den Kontrast Ihres Webdesigns untersuchen, korrigieren und überprüfen können, um auch die schwierigsten Szenarien anzugehen.
WCAG und Farbkontrast
Die Web Accessibility Initiative des W3C bietet Strategien, Standards und Ressourcen, um dafür zu sorgen, dass das Internet für so viele Menschen wie möglich zugänglich ist. Die Richtlinien, die diesen Standards zugrunde liegen, werden als Web Content Accessibility Guidelines (WCAG) bezeichnet. Die neueste stabile Version, WCAG 2.1, deckt eine wichtige Anforderung an die Barrierefreiheit ab: den minimalen Kontrast.
Die Beziehung zwischen zwei Farben in WCAG 2.1 wird durch ihr Kontrastverhältnis beschrieben, also durch die Zahl, die Sie erhalten, wenn Sie die Leuchtkraft von zwei Farben vergleichen. Die Leuchtkraft gibt an, wie nah eine Farbe an Schwarz (0 %) oder Weiß (100 %) liegt. Die WCAG definieren einige Regeln und Berechnungsalgorithmen für das Kontrastverhältnis, das erforderlich ist, damit das Web barrierefrei ist. Bei dieser Berechnung gibt es jedoch bekannte Probleme. Irgendwann wird eine noch zuverlässigere Methode eingeführt, aber derzeit ist die WCAG die beste Methode, die wir haben.
Welche Regeln gelten?
Ein höheres Kontrastverhältnis wird mit einer höheren Zahl bewertet, z. B. 4,5 oder 7 anstelle von 3. Wenn Sie sich mit der Punktetabelle vertraut machen möchten, sehen Sie sich den Contrast Checker von Polypane an.
Kontrast zwischen Farben testen
Wir wissen nun also, wonach wir suchen. Wie können wir das testen? Hier sind drei kostenlose Tools, mit denen Sie den Kontrast Ihrer Website prüfen, korrigieren und messen können. Die Stärken und Schwächen der einzelnen Methoden werden beschrieben, damit Sie die Barrierefreiheit der Farben und Inhalte Ihrer Website auf vielfältige Weise testen können.
- Pika
MacOS-App, mit der sich der Kontrast beliebiger Farben auf dem gesamten Bildschirm, Farben in Farbverläufen, Farben mit Transparenz und mehr darstellen lassen. Der Intent ist explizit. Nutzer wählen die zu vergleichenden Pixel manuell aus. Etwas weniger automatisiert, mit einem enormen Funktionszuwachs. - VisBug
Eine browserübergreifende Erweiterung, mit der sich mehrere Kontrast-Overlays gleichzeitig anzeigen lassen. Wie bei DevTools kann sie jedoch manchmal nicht die Absicht erkennen. - Chrome-Entwicklertools
Die Entwicklertools sind in Chrome integriert und enthalten verschiedene Möglichkeiten, um Farbprobleme zu untersuchen, zu korrigieren und zu beheben. Sie haben jedoch Mängel bei der Überprüfung von Farbverläufen und halbtransparenten Farben und können manchmal keinen Intent erkennen.
Pika (macOS-Anwendung)
Wenn DevTools oder VisBug den Kontrast nicht richtig beurteilen können, z. B. wenn Sie eine Farbe außerhalb des Browsers testen oder es um Transparenz oder Farbverläufe geht, ist Pika die Lösung. Pika hat Zugriff auf jedes Pixel auf dem Bildschirm, da es sich um ein System- und kein Webtool handelt.
Das bedeutet auch, dass die UX der Verwendung von Pika sich von der von DevTools oder VisBug unterscheidet. Die Entwicklertools und VisBug geben ihr Bestes, um die Text- und Hintergrundfarben aus dem DOM des Browsers anzuzeigen, während die von Pika verglichenen Farben an jeder Stelle auf dem Bildschirm manuell ausgewählt werden. Dies gibt Pika mehr Kontrolle und eröffnet einige weitere Anwendungsfälle:
- Sie können zwei beliebige Farben vergleichen, unabhängig davon, ob sie sich im Browser befinden. Wenn Sie sie auf dem Bildschirm sehen, können Sie sie testen.
- Farben mit Transparenz vergleichen
- Farben in Farbverläufen vergleichen
- Vergleich von Farben mit Mischmodi wie „mix-blend-mode“ in CSS
Zwei beliebige Farben vergleichen
Text mit einer Hintergrundfarbe vergleichen:
Strich- und Füllfarben von Vektorgrafiken vergleichen:
Vergleichen von Farben mit Transparenz
Textfarbe mit verschiedenen Hintergrund-Beispielpixeln vergleichen Hier wird das hellste Grau aus dem Frostglaseffekt als Vergleichsfarbe für den Hintergrund verwendet.
Farben mit Farbverläufen vergleichen
Vergleichen Sie Text auf einem Farbverlauf oder auf einem Bild. Hier wird das L von „Lasso“ mit dem Hellblau des Bildes verglichen:
VisBug
VisBug ist ein Tool, das an FireBug angelehnt ist und es Designern und Entwicklern ermöglicht, ihr Website-Design visuell zu prüfen, zu debuggen und zu verändern. Durch die Nachahmung der Benutzeroberfläche und des Nutzererlebnisses der Designtools, die Nutzer bereits kennen und lieben, soll die Einstiegshürde niedriger sein als bei den Chrome DevTools.
Probieren Sie VisBug aus oder installieren Sie es in Chrome, Firefox, Edge, Brave oder Safari.
Zu den angebotenen Tools gehört das Tool zur Prüfung der Barrierefreiheit.
In verschiedenen Browsern und sogar auf Mobilgeräten prüfen
Sobald auf das Tool „Barrierefreiheits-Prüftool“ geklickt wurde, werden alle Informationen zur Barrierefreiheit, auf die der Nutzer zeigt oder zu der er mit der Tastatur navigiert, in der Kurzinfo angezeigt. Diese Kurzinfo enthält Farbvergleiche zwischen den erkannten Vordergrund- und Hintergrundfarben.
Ein oder mehrere prüfen
In DevTools können Sie sich entweder eine einzelne Farbkombination ansehen oder einen Bericht zu allen Farbkombinationen auf der Seite abrufen. VisBug bietet jedoch einen guten Mittelweg, da mehrere Farbkombinationen zulässig sind. Wenn Sie auf ein Element klicken, bleibt die Kurzinfo erhalten. Halten Sie die Umschalttaste gedrückt und klicken Sie auf die anderen Elemente. Alle Kurzinfos bleiben erhalten:
Dies ist besonders wichtig für komponentenbasiertes Design, bei dem mehrere Teile einer Komponente die Bewertungskriterien für das Kontrastverhältnis erfüllen müssen. Mit dieser Methode können Sie alle diese Komponententeile gleichzeitig sehen. Auch für Designüberprüfungen geeignet.
Chrome-Entwicklertools
Wenn Sie Chrome installiert haben, stehen Ihnen bereits viele Tools für den Kontrasttest zur Verfügung:
- Farbauswahl
- Kurzinfo zur Prüfung
- Preisvergleichsportale – Übersicht
- Leuchtturm
- JS-Konsole
- Tools zur Farbfehlsichtigkeitssimulation
- Emulation der Systemeinstellung für den Farbkontrast
- WCAG 3.0-Test zur automatischen Preisvergleichsportal-Kompatibilität
Farbauswahl in den Chrome-Entwicklertools
Im Bereich „Elemente“ im Bereich „Stile“ der Chrome-Entwicklertools wird neben Farbwerten ein kleines quadratisches Farbmuster angezeigt. Wenn Sie auf dieses Farbfeld klicken, wird die Farbauswahl angezeigt. Wenn möglich, wird in der Mitte des Tools der Kontrast der Farbe vor einem Vordergrund oder Hintergrund angezeigt.
Im folgenden Beispiel wird die Farbauswahl für den Farbwert einer benutzerdefinierten Property geöffnet. Der Wert für das Kontrastverhältnis wird mit 15,79 angegeben und hat zwei grüne Häkchen, was bedeutet, dass der Wert die Anforderungen der WCAG 2.1 für AA und AAA erfüllt:
Automatische Korrektur in der Farbauswahl
Es ist praktisch, die Bewertung zu sehen, während Sie Farben auswählen. Die Chrome-Entwicklertools bieten jedoch eine zusätzliche Funktion für die automatische Korrektur. Wenn die Farbauswahl einen nicht bestandenen Wert für den Farbkontrast für barrierefreie Inhalte meldet, kann sie maximiert werden, um die Zielwerte für AA- und AAA-Bewertungen sowie eine Pipette zu sehen. Neben AA und AAA finden Sie Farbmuster und ein Aktualisierungssymbol. Wenn Sie darauf klicken, wird die am nächsten gelegene Farbe gefunden:
Wenn Sie nicht wählerisch in Bezug auf Farben sind, ist die Funktion zur automatischen Korrektur eine gute Möglichkeit, die Richtlinien für Barrierefreiheit einzuhalten und sich nicht zu viel Arbeit zu machen.
Kurzinfo zur Prüfung
Das Tool zur Elementauswahl bietet eine spezielle Funktion, wenn der Mauszeiger auf der Seite bewegt wird. Dabei werden allgemeine Informationen zu Schriftart, Farbe und Barrierefreiheit angezeigt. Das Tool zur Elementauswahl ist im folgenden Screenshot das Symbol links. Das ist das Feld mit dem Pfeilcursor unten rechts. Sie können sie auch mit der Tastenkombination Control+Shift+C (oder Command+Shift+C unter macOS) auswählen.
Nach der Aktivierung wird das Symbol blau. Wenn Sie auf ein beliebiges Element auf der Seite zeigen, wird die folgende Kurzinfo angezeigt:
Anstatt das Tool zur Farbauswahl zu verwenden, bei dem Sie im Bereich „Stile“ nach dem Farbmuster suchen müssen, können Sie mit diesem Tool einfach auf die Seite zeigen, um Kontrastwerte zu sehen. Wie bei der Farbauswahl kann auch hier jeweils nur ein Kontrastwert angezeigt werden.
Bump bump 'til you pass 🎶
Ich prüfe oft eine Farbkombination mit diesem Tool und stelle fest, dass sie das erforderliche Verhältnis nur knapp nicht erfüllt. Anstatt die automatische Korrekturfunktion der Farbauswahl zu verwenden (weil ich wählerisch bin), verändere ich die Farbkanäle im CSS und warte, bis ich das gewünschte Verhältnis erreiche. Ich nenne diesen Prozess Bump Bump Til You Pass, weil ich die Farbkanalnummern erhöhe, bis sie die WCAG 2.1-Anforderungen erfüllen.
Führen Sie die folgenden Schritte in der angegebenen Reihenfolge aus:
- Legen Sie im Bereich „Stile“ den Tastaturfokus auf eine Farbe fest.
- Aktivieren Sie das Tool zum Prüfen von Elementen mit der Tastenkombination
Control+Shift+C(oderCommand+Shift+Cunter macOS). - Bewegen Sie den Mauszeiger auf ein Ziel.
- Drücken Sie die Auf-/Ab-Taste auf der Tastatur, um die Zahlen im Farbwert zu ändern.
Das liegt daran, dass der Tastaturfokus weiterhin beim CSS-Stilwert liegt, während Sie mit der Maus auf ein Ziel zeigen können. Klicken Sie nicht auf das Ziel, da sich sonst der Fokus vom Bereich für Farbwerte verschiebt und Sie die Werte erst wieder ändern können, wenn Sie den Fokus wieder darauf setzen.
CSS-Übersicht
Bisher gab es in den Chrome DevTools Möglichkeiten, sich jeweils eine Farbkombination anzusehen. Mit der CSS-Übersicht können Sie jedoch Ihre gesamte Seite crawlen und alle nicht barrierefreien Kombinationen gleichzeitig anzeigen lassen:
Weitere Informationen zu dieser Funktion finden Sie in diesem Beitrag: CSS-Übersicht: Potenzielle CSS-Verbesserungen erkennen. In der YouTube-Reihe „DevTools-Tipps“ von Jecelyn Yeen erfahren Sie, wie Sie mit dem CSS-Übersichtsbereich potenzielle CSS-Verbesserungen erkennen.
Leuchtturm
Lighthouse ist ein weiteres Analysetool in den Chrome-Entwicklertools. Es kann Ihre Seite crawlen und nicht barrierefreie Farbkombinationen melden. Es enthält kleine Screenshots der einzelnen Farbkombinationen, die Sie als bestanden oder nicht bestanden bewerten können. Fehlerhafte Kombinationen wirken sich negativ auf Ihre Lighthouse-Bewertung aus.
So können diese Ergebnisse aussehen:
Die JS-Konsole
Vielleicht sind die bisher aufgeführten Tools nicht an Ihrem Standort verfügbar. Vielleicht wo du (den ganzen Tag) bist, ist JavaScript. Probieren Sie dieses Experiment aus. Im Bereich „Probleme“ der Konsole werden während der Entwicklung ständig Probleme mit dem Farbkontrast und der Barrierefreiheit gemeldet. Aktivieren Sie die Funktion unter „Einstellungen“ > „Tests“, wie in der Abbildung unten dargestellt:
Öffnen Sie dann das Problemfenster und sehen Sie nach, ob es dabei Probleme gibt. In diesem Fall können sie so aussehen:
Emulation für Farbenblinde
Apropos Farbkontrast und barrierefreie Farbkombinationen: Das Tool zur Simulation von Sehbeeinträchtigungen ist ebenfalls erwähnenswert. Dadurch ändern sich die Farben oder das Erscheinungsbild Ihres Designs, um die Auswirkungen verschiedener Formen der Farbenblindheit zu demonstrieren. So haben Sie die Möglichkeit, Ihr Design so zu ändern, dass die UX nicht nur über Farben mit Nutzern kommuniziert.
Es ist nicht sicher, Informationen ausschließlich durch Farben darzustellen, z. B. rot für schlecht und grün für gut. Einige Menschen sehen Grün- oder Rottöne nicht gleich. Dieses Emulationstool hilft Ihnen, das zu erleben und sich daran zu erinnern.
Emulation der Systemeinstellung für den Farbkontrast
Immer mehr Nutzer ändern ihre Kontrasteinstellungen in ihrem Betriebssystem, um die Personalisierung des Kontrasts in ihrer Benutzeroberfläche zu verringern oder zu erhöhen. CSS kann diese Einstellung genauso wie die Einstellungen für helle oder dunkle Themen nutzen. Die Chrome-Entwicklertools bieten die Möglichkeit, diese Einstellung zu emulieren, sodass Designs testen und an die Nutzeranfrage anpassen können, ohne die Einstellung des Systems zu ändern.
WCAG 3.0 APCA ausprobieren
Sie können auch Ihre Farbkombinationen mit dem experimentellen Bewertungssystem für das APC-Farbverhältnis testen. Diese Funktion wird unter „Einstellungen“ > „Tests“ aktiviert und ersetzt das WCAG 2.1-Verhältnissystem durch einen neueren und verbesserten Algorithmus zur Kontrastprüfung. So können Sie sich eine Vorschau der Ergebnisse ansehen, während der Vorschlag an einem Standard arbeitet.
Nach der Aktivierung können Sie die Kurzinfo zur Punktprüfung oder die Farbauswahl verwenden, um den Wert für das Farb-Pairing zu sehen und zu prüfen, ob die Prüfung bestanden wurde:
Fazit
Der Farbkontrast ist ein wichtiger Baustein für die Barrierefreiheit im Web. Wenn Sie ihn einhalten, wird das Web für die meisten Menschen in den unterschiedlichsten Situationen nutzerfreundlicher. Ich hoffe, dass diese drei Tools Ihnen dabei helfen, gute Farbentscheidungen zu treffen.