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:
Möglicherweise sind alle Beispiele für Sie lesbar, aber das ist nicht bei allen der Fall.
Ein barrierefreier Farbkontrast sorgt dafür, dass Text für alle gut lesbar ist. Manchmal ist es einfach, den Kontrast zu testen, manchmal ist es wirklich schwierig. Am Ende dieses Artikels kennen Sie drei neue Tools und Techniken zum Prüfen, Korrigieren und Verifizieren des Kontrasts Ihres Webdesigns, damit Sie auch die schwierigsten Szenarien meistern können.
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: Minimalkontrast.
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. Es gibt jedoch bekannte Probleme mit dieser Berechnung. 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. Weitere Informationen zur Bewertungstabelle finden Sie im Kontrast-Checker von Polypane.
Kontrast zwischen Farben testen
Jetzt, da wir wissen, wonach wir suchen, wie testen wir das? 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. Die Absicht ist explizit, Nutzer wählen die zu vergleichenden Pixel manuell aus. Ein bisschen weniger automatisiert, aber mit vielen neuen Funktionen. - 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 bieten verschiedene Möglichkeiten, Farbprobleme zu prüfen, zu korrigieren und zu beheben. Sie haben jedoch Mängel bei der Prüfung von Farbverläufen und halbtransparenten Farben und können manchmal die Absicht nicht 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. In DevTools und VisBug werden die Text- und Hintergrundfarben aus dem Browser-DOM so genau wie möglich angezeigt. Die Farben, die Pika vergleicht, werden dagegen manuell an einer beliebigen Stelle auf dem Bildschirm ausgewählt. Dadurch hat Pika mehr Kontrolle und es eröffnen sich einige zusätzliche 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:
So vergleichen Sie die Strich- und Füllfarben von Vektorgrafiken:
Farben mit Transparenz vergleichen
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
Text auf einem Farbverlauf oder auf einem Bild vergleichen 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
Nachdem auf das Tool zur Prüfung der Barrierefreiheit geklickt wurde, werden die Informationen zur Barrierefreiheit in der Kurzinfo angezeigt, wenn der Nutzer auf etwas zeigt oder die Tastatur verwendet. Diese Kurzinfo enthält Farbvergleiche zwischen den erkannten Vordergrund- und Hintergrundfarben.
Ein oder mehrere prüfen
In den 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. Klicken Sie auf ein Element, damit die Kurzinfo angezeigt bleibt. Halten Sie die Umschalttaste gedrückt und klicken Sie auf andere 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 Komponenten 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 für die automatische Preisvergleichsportal-Kennzeichnung
Farbauswahl in den Chrome-Entwicklertools
Im Chrome DevTools-Steuerfeld „Stile“ im Bereich „Elemente“ sind neben den Farbwerten kleine quadratische Farbmuster zu sehen. 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 Websites anzeigt, 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 eine 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 den Mauszeiger auf einen beliebigen Bereich der Seite bewegen, 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 die Kontrastwerte zu sehen. Wie bei der Farbauswahl kann nur jeweils 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 den Tastaturfokus im Bereich „Stile“ auf eine Farbe.
- 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 funktioniert, weil der Tastaturfokus noch auf dem 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 entfernt 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. Alle fehlerhaften Kombinationen wirken sich negativ auf Ihren Lighthouse-Wert aus.
Diese Ergebnisse können so aussehen:
Die JS-Konsole
Vielleicht sind die bisher aufgeführten Tools nicht an Ihrem Standort verfügbar. Vielleicht ist JavaScript (den ganzen Tag) das, was Sie am besten können. Hier ist ein Test, den Sie ausprobieren können. 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 den Bereich „Probleme“, um zu sehen, ob Probleme gefunden wurden. 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 nutzen, ebenso wie die Einstellungen für helle oder dunkle Themen. Mit den Chrome DevTools können Sie diese Einstellung emulieren, damit Designs getestet und an die Nutzeranfrage angepasst werden können, ohne die Einstellung im System 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.
Wenn die Funktion aktiviert ist, können Sie über die Kurzinfo zur Punktbewertung oder die Farbauswahl den Farbabgleichs-Wert sehen und prüfen, ob er den Mindestwert erreicht:
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.