Barrierefreie Farbkombinationen

9 von 10 Websites haben einen zu schwachen Kontrast zwischen Text und Hintergrund. Die Lesbarkeit wird damit vor allem für Menschen mit verringertem Sehvermögen erschwert. Ein deutlicher Kontrast erhöht den Komfort aber natürlich für alle Seitenbesucher:innen. Wie man das ganz einfach überprüfen kann, erfährst Du hinter Türchen Nummer 12.

Zu dieser Zahl kam die gemeinnützige Organisation WebAIM, die zum Center for Persons with Disabilities an der Utah State University gehört. In ihrem Projekt The WebAIM Million untersuchen sie jährlich die Barrierefreiheit von einer Millionen Websites. Wie diese Auswahl zustande kommt und was wie untersucht wurde, kannst Du dem verlinkten Bericht (auf englisch) entnehmen.

Die erschreckendste Zahl dabei ist sicherlich, dass nicht einmal 2% der untersuchten Websites vollständig barrierefrei sind! Barrierefrei ist eine Website dann, wenn sie die Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 erfüllt. Im Abstract zu den Richtlinien heißt es:

Die Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 decken einen großen Bereich von Empfehlungen ab, um Webinhalte barrierefreier zu machen. Wenn Sie diesen Richtlinien folgen, dann werden Inhalte für eine größere Gruppe von Menschen mit Behinderungen barrierefrei sein.

(…)

Darüber hinaus wird das Befolgen dieser Richtlinien Ihre Webinhalte in vielen Fällen für Nutzer im Allgemeinen benutzbarer machen.

86,3% der Websites besitzen ein zu geringes Kontrastverhältnis

Das verbreitetste Problem stellt der Kontrast zwischen Text und Hintergrund dar. Das ist allerdings auch eine Sache, die jede:r mit einer eigenen Website selbst und in den meisten Fällen sehr einfach beheben kann. Oder wie ich es sage: #EineBarriereWeniger.

Für die Darstellung auf Bildschirmen ist in der WCAG die Berechnung des Kontrastverhältnisses geregelt. Die Bandbreite reicht von 1 (weiß auf weiß) bis 21 (schwarz auf weiß). Die Untergrenze für einen ausreichend starken Kontrast liegt bei 4,5. Für Texte kleiner als 17pt liegt sie bei 7,0.

Ich zeige Dir mal ein paar Beispiele. Der Hintergrund dieser Website ist weiß. Den folgenden Text werde ich in sieben unterschiedlichen Farben angeben und dabei von einem Kontrastverhältnis von 21 (schwarzer Text) zu 1 (weißer Text) gehen.

#EineBarriereWeniger (K=21,0)

#EineBarriereWeniger (K=13,5)

#EineBarriereWeniger (K=7,0)

#EineBarriereWeniger (K=4,0)

#EineBarriereWeniger (K=2,0)

#EineBarriereWeniger (K=1,1)

#EineBarriereWeniger (K=1,0)

Jetzt selbst aktiv werden

Die richtigen Kontraste sind natürlich nicht nur bei Websites wichtig, sondern zum Beispiel auch bei allen Bild- und Videoinhalten auf Social Media. Wie hoch das Kontrastverhältnis zwischen zwei Farben ist, kannst Du super einfach und kostenlos mit dem Kontrastrechner von leserlich.info überprüfen.

Schau Dir doch einfach mal die Farben an, die Du regelmäßig verwendest. Ist das Kontrastverhältnis hoch genug? Wenn nicht, dann kannst Du mit dem Kontrastrechner mal ein wenig rumprobieren, welche Farbe einen besseren Kontrast bietet. Viel Spaß dabei! Meine Farben haben zueinander übrigens ein Verhältnis von K=8,9 👍

Für die Barrierefreiheit ist natürlich auch das Verhältnis von Farbtönen zueinander relevant. Von Rot/Grün-Schwäche hast Du sicher schon gehört. Welche Farben darüber hinaus besser nicht miteinander kombiniert werden sollten, erfährst Du in der Ergänzung des Artikels im Januar. Um das nicht zu verpassen meld Dich am besten direkt für den Newsletter an: