Eine Übersicht über drei Tools und Techniken zum Testen und Überprüfen des barrierefreien Farbkontrasts Ihres Designs.
Angenommen, Sie haben Text auf einem hellen Hintergrund, wie hier:
Auch wenn alle Beispiele für Sie lesbar sind, ist das nicht für alle der Fall.
Ein barrierefreier Farbkontrast sorgt dafür, dass Text für alle lesbar ist. Manchmal ist es einfach, den Kontrast zu testen, und manchmal ist es wirklich schwierig. Am Ende dieses Beitrags haben Sie drei neue Tools und Techniken, mit denen Sie den Kontrast Ihres Webdesigns prüfen, korrigieren und verifizieren können, um auch die schwierigsten Szenarien zu meistern.
WCAG und Farbkontrast
Die Web Accessibility Initiative des W3C bietet Strategien, Standards und Ressourcen, um das Internet für möglichst viele Menschen zugänglich zu machen. 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: Mindestkontrast.
Die Beziehung zwischen zwei Farben wird in WCAG 2.1 durch ihr Kontrastverhältnis beschrieben. Das ist die Zahl, die Sie erhalten, wenn Sie die Luminanz von zwei Farben vergleichen. Die Luminanz beschreibt, wie nah eine Farbe an Schwarz (0 %) oder Weiß (100 %) ist. Die WCAG definieren einige Regeln und Berechnungsalgorithmen, die festlegen, wie dieses Kontrastverhältnis aussehen muss, damit das Web barrierefrei ist. Bei dieser Berechnung gibt es jedoch bekannte Probleme. Irgendwann wird es eine noch zuverlässigere Methode geben, aber derzeit sind die WCAG die beste Option.
Wie lauten die Regeln?
Ein höheres Kontrastverhältnis wird mit einer höheren Zahl bewertet, z. B. 4,5 oder 7 statt 3. Weitere Informationen zur Bewertungstabelle finden Sie im Kontrastprüfer 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 Tools werden beschrieben, damit Sie die Barrierefreiheit der Farben und Inhalte Ihrer Website auf verschiedene Weise testen können.
- Pika
Eine macOS-App, die den Kontrast aller Farben auf dem gesamten Bildschirm, Farben in Farbverläufen, Farben mit Transparenz und mehr anzeigen kann. Die Absicht ist explizit, Nutzer wählen die zu vergleichenden Pixel manuell aus. Ein bisschen weniger automatisiert, aber mit einem enormen Funktionsgewinn. - VisBug
Eine browserübergreifende Erweiterung, die mehrere Kontrast-Overlays gleichzeitig anzeigen kann, aber wie die Entwicklertools manchmal die Absicht nicht erkennt. - 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 Schwächen bei der Prüfung von Farbverläufen und halbtransparenten Farben und können manchmal die Absicht nicht erkennen.
Pika (macOS-Anwendung)
Wenn die Entwicklertools oder VisBug den Kontrast nicht richtig beurteilen können, z. B. wenn Sie eine Farbe außerhalb des Browsers testen müssen oder wenn Transparenz oder Farbverläufe im Spiel sind, ist Pika die richtige Wahl. Pika hat Zugriff auf jedes Pixel auf dem Bildschirm, da es sich um ein Systemtool und nicht um ein Webtool handelt.
Das bedeutet auch, dass die UX für die Verwendung von Pika sich von der von DevTools oder VisBug unterscheidet. Die DevTools und VisBug versuchen, die Text- und Hintergrundfarben aus dem Browser-DOM anzuzeigen, während die von Pika verglichenen Farben manuell von einem beliebigen Punkt auf dem Bildschirm ausgewählt werden. Dadurch hat Pika mehr Kontrolle und es ergeben sich einige zusätzliche Anwendungsfälle:
- Vergleich von zwei beliebigen Farben, unabhängig davon, ob sie sich im Browser befinden oder nicht – wenn Sie sie auf dem Bildschirm sehen, können Sie sie testen.
- Farben mit Transparenz werden verglichen.
- Farben in Farbverläufen vergleichen.
- Vergleich von Farben, die Mischmodi wie „mix-blend-mode“ in CSS verwenden.
Zwei beliebige Farben vergleichen
Text mit einer Hintergrundfarbe vergleichen:
Vergleichen Sie die Strich- und Füllfarben von Vektorgrafiken:
Farben mit Transparenz vergleichen
Vergleicht die Textfarbe mit einer Vielzahl von Hintergrundbeispielpixeln. Hier wird das hellste Grau aus dem Milchglaseffekt als Hintergrundvergleichsfarbe verwendet.
Farben mit Farbverläufen vergleichen
Vergleiche Text auf einem Farbverlauf oder auf einem Bild. Hier wird das L von „Lasso“ mit dem Hellblau des Bildes verglichen:
VisBug
VisBug ist ein von FireBug inspiriertes Tool für Designer und Entwickler, mit dem sie ihr Websitedesign visuell prüfen, debuggen und damit experimentieren können. Die Einstiegshürde soll niedriger sein als bei den Chrome-Entwicklertools, da die Benutzeroberfläche und die UX der Designtools emuliert werden, die die Nutzer kennen und lieben.
VisBug ausprobieren oder in Chrome, Firefox, Edge, Brave oder Safari installieren.
Eines der Tools ist das Tool „Accessibility Inspect“.
Prüfung in verschiedenen Browsern (und sogar auf Mobilgeräten)
Nachdem Sie auf das Tool „Barrierefreiheit prüfen“ geklickt haben, werden im Tooltip Informationen zur Barrierefreiheit für alle Elemente angezeigt, auf die Sie zeigen oder zu denen Sie mit der Tastatur navigieren. Dieser Kurzinfo enthält Farbvergleiche zwischen den gefundenen Vorder- und Hintergrundfarben.
Ein oder mehrere Elemente prüfen
In den DevTools können Sie sich entweder ein einzelnes Farbpaar ansehen oder einen Bericht zu allen Farbpaaren auf der Seite abrufen. VisBug bietet hier einen guten Mittelweg, da mehrere Farbpaare möglich sind. Klicken Sie auf ein Element, damit die Kurzinfo angezeigt wird. Halten Sie die Umschalttaste gedrückt und klicken Sie auf weitere Elemente. Alle Kurzinfos bleiben dann sichtbar:
Das ist besonders wichtig für das komponentenbasierte Design, bei dem mehrere Teile einer Komponente die Kontrastverhältniswerte erfüllen müssen. Mit dieser Methode können Sie alle diese Komponenten auf einmal sehen. Auch für Designprüfungen geeignet.
Chrome-Entwicklertools
Wenn Sie Chrome installiert haben, stehen Ihnen bereits viele Tools zum Testen des Kontrasts zur Verfügung:
- Farbauswahl
- Tooltip zur Prüfung
- CSS-Übersicht
- Leuchtturm
- Die JS-Konsole
- Tools zur Emulation von Farbenblindheit
- Emulation der Farbkontrasteinstellung des Systems
- WCAG 3.0 APCA-Experiment
Farbauswahl in den Chrome-Entwicklertools
Im Bereich „Stile“ der Chrome-Entwicklertools im Bereich „Elemente“ 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 zu einem Vorder- oder Hintergrund angezeigt.
Im folgenden Beispiel wird die Farbauswahl für einen benutzerdefinierten Eigenschaftsfarbwert geöffnet. Das Kontrastverhältnis wird mit 15,79 angegeben und hat zwei grüne Häkchen, was bedeutet, dass die Anforderungen der WCAG 2.1 für AA und AAA erfüllt sind:
Autokorrektur für die Farbauswahl
Es ist praktisch, den Wert bei der Farbauswahl zu sehen, aber die Chrome-Entwicklertools bieten eine zusätzliche Funktion für die Autokorrektur. Wenn die Farbauswahl einen nicht bestandenen Wert für den barrierefreien Farbkontrast meldet, kann sie maximiert werden, um die AA- und AAA-Zielwerte sowie eine Pipette anzuzeigen. Neben AA und AAA befinden sich Farbfelder und ein Aktualisierungssymbol, auf das Sie klicken können, um die nächstgelegene Farbe zu finden, die die Anforderungen erfüllt:
Wenn Sie bei Farben nicht wählerisch sind, ist die automatische Korrektur eine gute Möglichkeit, die Richtlinien für Barrierefreiheit im Internet zu erfüllen, ohne zu viel Arbeit in die Aufgabe zu stecken.
Kurzinfo zur Prüfung
Das Tool zur Elementauswahl bietet eine spezielle Funktion, wenn Sie den Mauszeiger auf die Seite bewegen. Es werden allgemeine Informationen zu Schriftart, Farbe und Bedienungshilfen angezeigt. Das Tool zur Elementauswahl ist das Symbol links im folgenden Screenshot. Das ist das Feld mit einem Pfeilcursor über der rechten unteren Ecke. Sie können es auch mit dem Hotkey Control+Shift+C (oder Command+Shift+C unter macOS) auswählen.
Nach der Aktivierung wird das Symbol blau. Wenn Sie auf ein Element auf der Seite zeigen, wird der folgende Tooltip für die Schnellprüfung angezeigt:
Im Gegensatz zur Farbauswahl, bei der Sie das Farbmuster im Bereich „Stile“ finden müssen, können Sie mit diesem Tool einfach auf die Seite zeigen, um Kontrastwerte zu sehen. Wie die Farbauswahl kann auch dieses Tool jeweils nur einen Kontrastwert anzeigen.
Bump, bump, bis du vorbei bist 🎶
Ich prüfe oft eine Farbkombination mit diesem Tool und stelle fest, dass sie das erforderliche Verhältnis nur knapp verfehlt. Anstatt die Autokorrekturfunktion der Farbauswahl zu verwenden (weil ich wählerisch bin), passe ich die Farbkanäle im CSS an und beobachte, bis ich das gewünschte Verhältnis erreicht habe. Ich nenne diesen Prozess „Anpassen, bis es passt“, weil ich die Farbkanalnummern so lange anpasse, bis sie die WCAG 2.1 erfüllen.
Die Schritte sind wie folgt und müssen in der genauen Reihenfolge ausgeführt werden:
- Setzen Sie den Tastaturfokus auf eine Farbe im Bereich „Stile“.
- Aktivieren Sie das Tool „Element untersuchen“ mit der Tastenkombination
Control+Shift+C(oderCommand+Shift+Cunter macOS). - Bewegen Sie den Mauszeiger auf ein Ziel.
- Drücken Sie die Nach-oben- oder Nach-unten-Taste auf der Tastatur, um die Zahlen im Farbwert zu ändern.
Das funktioniert, weil der CSS-Stilwert immer noch 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 sonst der Fokus vom Farbwertbereich wegbewegt wird und Sie die Werte erst wieder verschieben können, wenn Sie den Fokus wieder darauf legen.
Übersicht über Preisvergleichsportale
Bisher konnten Sie in den Chrome-Entwicklertools immer nur ein Farbpaar auf einmal ansehen. Mit der CSS-Übersicht können Sie jedoch die gesamte Seite crawlen und alle nicht barrierefreien Paare auf einmal anzeigen lassen:
Weitere Informationen zu dieser Funktion finden Sie im Beitrag CSS-Übersicht: Potenzielle CSS-Verbesserungen identifizieren. Sie können sich auch das YouTube-Video von Jecelyn Yeen in der Reihe „DevTools-Tipps“ ansehen, in dem sie erklärt, wie Sie potenzielle CSS-Verbesserungen mit dem Bereich „CSS-Übersicht“ identifizieren.
Leuchtturm
Lighthouse ist ein weiteres Prüftool in den Chrome-Entwicklertools. Es kann Ihre Seite crawlen und unzugängliche Farbkombinationen melden. Es enthält kleine Screenshots der einzelnen Farbkombinationen, die Sie sich ansehen können, und zeigt an, ob sie den Test bestehen oder nicht. Alle fehlerhaften Kombinationen wirken sich negativ auf Ihren Lighthouse-Score aus.
Hier ein Beispiel für die Ergebnisse:
Die JS-Konsole
Vielleicht sind alle bisher aufgeführten Tools nicht das Richtige für Sie. Vielleicht sind Sie den ganzen Tag mit JavaScript beschäftigt. Hier ist ein Test, den Sie ausprobieren können. Im Bereich „Probleme“ der Konsole können während der Entwicklung ständig Probleme mit der Barrierefreiheit im Internet im Zusammenhang mit dem Farbkontrast gemeldet werden. Aktivieren Sie die Funktion unter „Einstellungen“ > „Experimente“, wie im Folgenden gezeigt:
Öffnen Sie dann den Bereich „Probleme“ und sehen Sie nach, ob Probleme gefunden wurden. Wenn ja, können sie so aussehen:
Emulation von Farbenblindheit
Wenn wir schon beim Thema Farbkontrast und barrierefreie Farbkombinationen sind, sollten wir auch das Tool zur Emulation von Sehschwächen erwähnen. Dadurch werden die Farben oder das Erscheinungsbild Ihres Designs geändert, um die Ergebnisse verschiedener Arten von Farbenblindheit zu demonstrieren. So haben Sie die Möglichkeit, Ihr Design so zu ändern, dass die Farbe nicht die einzige Möglichkeit ist, wie die UX mit einem Nutzer kommuniziert.
Es ist keine sichere Methode für die Barrierefreiheit, Informationen ausschließlich über Farben darzustellen, z. B. Rot für schlecht und Grün für gut. Manche Menschen sehen Grün- oder Rottöne anders. Mit diesem Emulationstool können Sie das nachempfinden und sich daran erinnern.
Emulation der Systemeinstellung für den Farbkontrast
Immer mehr Nutzer ändern die Kontrasteinstellungen in ihrem Betriebssystem, um die Kontrastpersonalisierung in ihrer Benutzeroberfläche zu erhöhen oder zu verringern. CSS kann diese Einstellung nutzen, genau wie die Einstellungen für das helle oder dunkle Design. In den Chrome-Entwicklertools kann diese Einstellung emuliert werden, sodass Designs getestet und an die Nutzeranfrage angepasst werden können, ohne die Einstellung im System zu ändern.
WCAG 3.0 APCA ausprobieren
Du kannst auch versuchen, deine Farbkombinationen mit dem experimentellen APCA-Farbbewertungssystem zu testen. Sie können sie über „Einstellungen“ > „Experimente“ aktivieren. Dadurch wird das WCAG 2.1-Verhältnissystem durch einen neueren und verbesserten Algorithmus zur Kontrastprüfung ersetzt. Sie können sich die Ergebnisse als Vorschau ansehen, während der Vorschlag zu einem Standard weiterentwickelt wird.
Nachdem du die Funktion aktiviert hast, kannst du die Kurzinfo zur Punktprüfung oder die Farbauswahl verwenden, um den Wert für die Farbkombination zu sehen und zu prüfen, ob er den Anforderungen entspricht:
Fazit
Farbkontrast ist ein wichtiger Teil des Puzzles für die Barrierefreiheit im Web. Wenn Sie sich daran halten, wird das Web für die meisten Menschen in den unterschiedlichsten Situationen besser nutzbar. Hoffentlich helfen Ihnen diese drei Tools, die richtigen Farbentscheidungen zu treffen.