Barrierefreie Farbkontraste

Die Wahl richtiger Farbkombinationen und Kontraste ist entscheidend, damit Menschen mit Seheinschränkung alle Inhalte wahrnehmen können.

Warum sind Farbkontraste wichtig?

Farben sind ein wesentlicher Bestandteil jeder Benutzeroberfläche, aber nicht alle Farbkombinationen eignen sich für alle Benutzenden. Besonders Menschen mit Sehbehinderungen und Sehschwäche können Schwierigkeiten haben, Texte, Grafiken und andere Bedienelemente zu erkennen, wenn die Farbkontraste nicht stark genug sind.

Barrierefreie Farbkontraste stellen sicher, dass Menschen mit Seheinschränkung Inhalte in ausreichendem Maße voneinander unterscheiden können. Ziel ist es, den informationstragenden Vordergrund vom Hintergrund visuell ausreichend abzuheben. Dann können Inhalte wahrgenommen werden.

Wie stellt man sicher, dass die Farbkontraste barrierefrei sind?

Um sicherzustellen, dass die Farbkontraste barrierefrei sind, sollte man die Empfehlungen des Web Content Accessibility Guidelines (WCAG) 2.1 befolgen. Diese Empfehlungen 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, es sich um große Schrift oder kleinen Schrift handelt, als ob man also einen Wert von 4,5:1 oder 3:1 braucht, 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.

Welche Tools gibt es für die Überprüfung der Farbkontraste?

Es gibt verschiedene Tools, um sicherzustellen, dass die Farbkontraste ihrer Websites den WCAG-Empfehlungen entsprechen. Diese Tools analysieren die Farben auf einer Website und berechnen dann den Kontrast zwischen Hintergrund und Text. Bei Microsoft Word zum Beispiel kann man die Farbkontraste im Text über Dokumentenüberprüfung unter dem Reiter Barrierefreiheit überprüfen auswerten.

Außerdem empfehlen den Colour Contrast Analyser (CCA), mit dessen Hilfe man über eine Pipette, Vordergrund zu Hintergrund nach WCAG Standard analysieren kann. Dieser ist nicht an einen Browser gebunden, sondern kann über den gesamten Desktop benutzt werden – also beispielsweise auch in Dokumenten oder anderen Anwendungen.

Für Designer eignet sich außerdem die Farbpalette von Colorsafe, die einen barrierefreie Farbkombinationen nach WCAG-Standard vorschlägt.

Wichtigkeit der Farbkontraste für andere Elemente

Es ist wichtig zu beachten, dass die Farbkontraste nicht nur für den regulären Text auf einer Website wichtig sind, sondern auch für andere Elemente wie Schaltflächen, Links und Grafiken. Auch diese sollten barrierefrei sein. Hier gilt ein Grenzwert von mindestens 3:1 zur angrenzenden Farbe. In der Regel ist dies der Kontrast vom Element zum Hintergrund.

Barrierefrei Farbkontraste nutzen allen

Was viele nicht wissen, ist, dass kontrastreiche Darstellungen allen nutzen. Gerade am Smartphone zeigt sich dies, wenn man draußen unterwegs ist und die Sonne auf das Display scheint. Dann sind kontrastreiche Texte deutlich besser les- und wahrnehmbar. Von barrierefreien Kontrasten profitieren also alle Menschen.

Fazit

Barrierefreie Farbkontraste sind ein wichtiger Faktor für eine inklusive und zugängliche Benutzeroberfläche im Web. Indem man die WCAG-Empfehlungen befolgt und Tools verwendet, um die Farbkontraste zu überprüfen, kann man sicherstellen, dass jeder Benutzer, unabhängig von seiner Sehfähigkeit, die Informationen auf einer Website effektiv wahrnehmen und verstehen kann.

Autor: Stiftung Pfennigparade