Wie misst man barrierefreie Farbkontraste?

Barrierefreie Farbkontraste stellen sicher, dass Menschen mit Sehbehinderungen oder Sehschwächen Inhalte wie Texte, aber auch Grafiken und Bedienelemente wahrnehmen können. In diesem Artikel erklären wir, wie man barrierefreie Farbkontraste auf einer Webseite misst und welche Tools dafür verwendet werden können.

Barrierefreie Farbkontraste haben Grenzwerte

Farbkontrast ist der Unterschied in der Helligkeit zwischen zwei Farben. Ein barrierefreier Kontrast hebt den informationstragenden Vordergrund vom Hintergrund visuell ausreichend ab. Um sicherzustellen, dass die Farbkontraste barrierefrei sind, sollte man die Empfehlungen des Web Content Accessibility Guidelines (WCAG) befolgen.

Diese besagen, dass der Kontrast zwischen dem Hintergrund und dem Text mindestens 4,5:1 betragen sollte, wenn es sich um Schriftgrößen unter 24 Pixel handelt (18,7 px bei fetter Schrift), und mindestens 3:1, wenn es sich um großen Text handelt. Falls auf einer Webseite unklar ist, ob es sich um große Schrift oder kleine Schrift handelt, also ob man also einen Wert von 4,5:1 oder 3:1 benötigt, eignet sich die Web Developer Toolbar. Dort findet man unter Informationen > Elementinformationen einblenden (englisch: Display Element Information) im Bereich Text die Schriftgröße in Pixeln.

Tools zur Messung des Farbkontrasts

Es gibt verschiedene Tools, die zur Messung des Farbkontrasts auf Webseiten verwendet werden können. Farbkontraste kann man sowohl mit Programmen, die man auf dem Computer oder Mac installiert, als auch mit Webbrowser Erweiterungen messen.

Folgende Tools können wir empfehlen:

1.  Color Contrast Analyzer: Der Color Contrast Analyzer ist eine Desktop-Anwendung, die sowohl für Windows als auch für MacOS verfügbar ist. Die Anwendung ermöglicht die präzise Messung von Farbkontrasten und bietet darüber hinaus Funktionen wie die Simulation von Farbsehschwächen.
Das Programm misst Kontraste nicht automatisch. Man muss diesen manuell mit einer Pipette messen. Bei der Messung stellt man schnell fest, dass sich die einzelnen Pixel innerhalb einer Farbe voneinander unterscheiden. Daher muss man zu achten, einen Pixel mit der Pipette zu treffen, der am ehesten der visuellen Wahrnehmung des Auges entspricht.
Der Vorteil der Anwendung ist, dass man nicht an einen Webbrowser gebunden ist, wie bei anderen Tools. So kann man nicht nur die Kontrastwerte von Webseiten messen, sondern man das Programm auch über verschiedene Anwendungen hinweg nutzen (wie beispielsweise in Design-Programmen wie Illustrator).
Der Color Contrast Analyzer wird vom BIK-Prüfverbund in deren BITV-Test verwendet.

2.  Browser-Erweiterungen: Neben der Nutzung von Anwendungen gibt es auch die Möglichkeit, Add-Ons oder Erweiterungen im Browser zu installieren. Solche Tools können über den Webstore in Chrome oder die Erweiterungen in Firefox in den Browser integriert werden. Empfehlen können wir den Colour Contrast Checker für Chrome und den WCAG Colour Contrast Checker, ebenfalls für Chrome oder Firefox. Auch in Microsoft Edge findet man ähnliche Erweiterungen.

3.  Developer Tools: Hat man beispielsweise aus Sicherheitsgründen oder Restriktionen durch die IT keine Möglichkeit, Programme oder Erweiterungen zu installieren, bieten Chrome und Firefox über die Developer Tools und den Inspektor ebenfalls Kontrastmessungen an. Dies ist allerdings nicht immer zuverlässig für alle Elemente auf einer Website.

Barrierefreie Kontraste identifizieren

Die Messung vorhandener Kontraste haben wir nun ausführlich behandelt. Designer stehen jedoch häufig vor dem Problem, diese für die Entwicklung eines Designs auszuprobieren und zu finden. Hierbei kann die Farbpalette von Colorsafe helfen, die barrierefreie Farbkombinationen nach WCAG-Standard vorschlägt.

Fazit

Für Betroffene mit Einschränkungen sind barrierefreie Farben entscheidend, um Inhalte wahrnehmen und voneinander unterscheiden zu können. Für Webseiten- und Softwareentwicklende sind sie auch deshalb von Bedeutung, weil sie Teil der gesetzlichen Forderungen in Deutschland sind. Mit den richtigen Tools können Sie sicherstellen, dass ihre Webseite oder Software diesen Vorgaben entspricht und für alle Nutzenden zugänglich ist.

Autor: Stiftung Pfennigparade