Wie man für Farbenblindheit gestaltet

Stellen Sie sich Folgendes vor: Sie senden ein Online-Formular ab und erhalten eine Fehlermeldung mit dem Text: 'Bitte korrigieren Sie die Formularfehler.' Sie scrollen nach unten, aber es wird nicht angezeigt, wo die Fehler sind.

Für die 300 Millionen Menschen weltweit, die eine Form von Farbsehschwäche haben(opens in a new tab), ist das oben beschriebene Szenario Alltag. Und da Farbe eines der beliebtesten Mittel zur Informationsvermittlung ist, stehen diese Nutzer vor einer Reihe von Herausforderungen beim Navigieren im Web.

Im Folgenden erklären wir, welchen Einfluss Farbe auf die Barrierefreiheit hat, und geben Tipps, wie Sie farbenblindfreundliche Websites gestalten können – ohne ganz auf Farbe zu verzichten.

3 verschiedene Ausprägungen von Farbenblindheit. Rot-Grün-Farbenblindheit, Blau-Gelb-Farbenblindheit und Monochromasie-Farbenblindheit

Farbenblindheit verstehen

Entgegen dem, was der Begriff Farbenblindheit vermuten lässt, können die meisten Menschen mit Farbsehschwäche Pigmente sehen. Sie sehen also nicht gar keine Farben, sondern haben Schwierigkeiten, bestimmte Farben voneinander zu unterscheiden. 

Es gibt drei verschiedene Arten von Farbenblindheit:

1. Rot-Grün-Farbenblindheit: Dies ist die häufigste Form der Farbenblindheit und führt dazu, dass Betroffene Rot und Grün verwechseln. Zu den Typen der Rot-Grün-Farbenblindheit gehören:

• Deuteranomalie: Grün erscheint rot.

• Protanomalie: Rot erscheint grün und stumpf.

• Protanopie/Deuteranopie: Keine Unterscheidung zwischen Rot und Grün möglich.

2. Blau-Gelb-Farbenblindheit: Weniger verbreitet als Rot-Grün-Farbenblindheit, führt diese dazu, dass Betroffene Blau und Gelb verwechseln. Zu den Typen der Blau-Gelb-Farbenblindheit gehören:

• Tritanomalie: Es ist schwierig, Gelb und Rot oder Blau und Grün zu unterscheiden.

• Tritanopie: Es ist schwierig, Blau und Grün, Lila und Rot oder Gelb und Rosa zu unterscheiden. Farben erscheinen zudem weniger leuchtend.

3. Monochromasie: Dies ist die seltenste Form der Farbenblindheit(opens in a new tab) und tritt bei etwa 1 von 33.000 Menschen auf. Dies ist die „echte“ Farbenblindheit, bei der die betroffene Person keine Farben sehen kann.

Unabhängig von der Art der Farbenblindheit beeinflusst sie, wie einfach jemand im Web navigieren kann. Zum Beispiel können Links oder Buttons schwer zu erkennen sein, wenn sie nicht sichtbar sind oder nicht genug Kontrast oder Klarheit aufweisen. Auch Text kann schwer lesbar sein, wenn er sich nicht ausreichend vom Hintergrund abhebt. Schwarzer Text auf weißem Hintergrund ist besonders für Menschen mit Blau-Gelb- oder Rot-Grün-Farbenblindheit schwer zu lesen. Diese Kombination kann zu Augenbelastung oder Blendung führen, was die Lesbarkeit verringert. 

Letztlich führen diese Probleme zu einer schlechten Nutzererfahrung für farbenblinde Menschen, was alltägliche Aufgaben erschwert.

Überprüfen Sie Ihren Farbkontrast

Farbkontrast macht den Unterschied zwischen einer Website, die navigierbar und einfach zu bedienen ist, und einer, die es nicht ist. Ohne den richtigen Farbkontrast zwischen Elementen können farbenblinde Nutzer diese möglicherweise nicht leicht voneinander unterscheiden. 

Ein guter Farbkontrast verbessert nicht nur die Nutzererfahrung, sondern hilft Ihnen auch, die in den Web Content Accessibility Guidelines (WCAG) enthaltenen Barrierefreiheitsstandards einzuhalten, die im UK Equality Act 2010 referenziert werden. Die WCAG kennt drei verschiedene Konformitätsstufen: A (Mindeststandard), AA (Standard) und AAA (höchste). Jede Stufe hat unterschiedliche Empfehlungen für Farbkontrastverhältnisse:

• Stufe A und AA: Normaler Text sollte ein Mindestkontrastverhältnis von 4,5:1 haben. Großer Text sollte ein Verhältnis von 3:1 haben. 

• Stufe AAA: Normaler Text sollte ein Verhältnis von 7:1 und großer Text von 4,5:1 haben.

Mindestens sollten Sie Stufe AA oder AAA anstreben, um nicht nur Nutzern mit Farbenblindheit, sondern auch anderen Menschen mit Sehbehinderungen gerecht zu werden. Es ist wichtig zu beachten, dass Stufe AAA die höchste Stufe der Web-Barrierefreiheit ist und maximale Zugänglichkeit bietet, aber auch strengere Designvorgaben hat.

Best Practices für farbenblindfreundliche Websites

Ihre Website für Menschen mit Farbsehschwäche zugänglich zu gestalten, bedeutet nicht, dass Sie ganz auf Farbe verzichten müssen; Sie sollten nur bewusster damit umgehen. Hier sind einige Best Practices für das Design mit Blick auf Farbenblindheit – sie alle tragen zu einem zugänglicheren und inklusiveren Design bei.

1. Verlassen Sie sich nicht nur auf Farbe

Das übergeordnete Thema beim Design für Farbenblindheit ist, sich nicht zu sehr auf Farbe zu verlassen. Sie sollten Farbe nicht als einziges Element verwenden, das die Aufmerksamkeit Ihrer Nutzer erregt – oder sie auf wichtige Informationen hinweist. Wenn Sie Farbe zur Informationsvermittlung nutzen möchten, kombinieren Sie sie mit einem weiteren Element (wie einer Fehlermeldung oder einem Symbol), damit Menschen mit Farbsehschwäche folgen können.

2. Verwenden Sie Icons und Symbole

Eine der häufigsten Möglichkeiten, Farbe auf einer Website zu ergänzen, ist die Verwendung von Icons und Symbolen. Universelle Symbole wie Ausrufezeichen können zum Beispiel die Aufmerksamkeit der Nutzer auf sich ziehen. Beim Beispiel eines fehlenden Formularfeldes könnten Sie einen roten Rahmen mit einem Ausrufezeichen kombinieren, um einen Fehler anzuzeigen.

Ein Beispiel für ein Balkendiagramm, bei dem jede Säule ein anderes Muster hat.

3. Verwenden Sie Texturen und Muster

Wenn Sie bestimmte Objekte hervorheben möchten, ist es eine gute Idee, Texturen und/oder Muster zu integrieren. Das ist besonders hilfreich bei Diagrammen und Grafiken, bei denen Farbe oft zur Unterscheidung verwendet wird. Durch das Hinzufügen von Texturen und Mustern wie Karos, Linien und Punkten kann jedes Element als einzigartig und leicht identifizierbar hervorgehoben werden. 

Wenn Sie zum Beispiel eine Karte mit verschiedenen Geländetypen einbinden, verwenden Sie neben Farben unterschiedliche Texturen (wie gestreift, gepunktet, schraffiert usw.). Das hilft, verschiedene Landschaftsformen zu unterscheiden und macht die Karte für Menschen mit Farbenblindheit zugänglicher.

Wenn Sie Diagramme und Grafiken auf Ihrer Website einbinden, achten Sie darauf, auch Alternativtexte für Menschen hinzuzufügen, die Inhalte nicht visuell wahrnehmen können.

4. Verwenden Sie Beschriftungen

Beschriftungen auf Ihrer Website können die Nutzererfahrung für Menschen mit Farbenblindheit erheblich verbessern. Texturen und Muster sind tolle Designelemente für Diagramme und Grafiken, aber Beschriftungen machen alles noch klarer. Sie helfen auch Nutzern, die Screenreader verwenden, Ihre Seite besser zu navigieren und zu verstehen.

Beschriftungen sind besonders wichtig, wenn Sie auf Ihrer Website Elemente haben, die sich nur durch Farbe unterscheiden. Wenn Sie zum Beispiel Produkte in verschiedenen Farben verkaufen, hilft die Beschriftung jeder Option den Nutzern, zu wissen, was sie kaufen, und fundierte Kaufentscheidungen zu treffen.

Zusätzlich können Beschriftungen Ihr SEO-Ranking verbessern. Sie liefern Suchmaschinen-Bots mehr Informationen über Ihre Seite. Je beschreibender Ihre Beschriftungen sind, desto höher Ihr SEO-Ranking.

5. Setzen Sie auf Fettdruck

Menschen mit Farbenblindheit können dicke und markante Linien besser erkennen. Vermeiden Sie dünne Farbstreifen und stellen Sie sicher, dass Links fett und deutlich hervorgehoben sind. Das verbessert die visuelle Klarheit und den Fokus der Nutzer. Zum Beispiel können dicke, fette Linien unter Call-to-Action (CTA)-Buttons den Nutzern helfen, die nächsten Schritte zu erkennen und so Verwirrung und Frustration verringern.

Stilisierte Versionen derselben Webseite, die zeigen, wie fetter Text die Lesbarkeit verbessert.

6. Verwenden Sie Farbkontrast richtig

Sie können die Komponenten Ihrer Website für alle Nutzer hervorheben, indem Sie Farbkontrast in Ihrem Design richtig einsetzen. Der Trick ist, neben Farbtönen auch Helligkeit und Tonwert zu nutzen. Wenn Sie nur nach Farbe kontrastieren, aber die gleiche Helligkeit beibehalten, können Elemente für Menschen mit Farbsehschwäche verschwimmen oder undeutlich wirken. 

Die Anpassung von Helligkeit und Tonwert ist nicht nur eine gute Praxis für Barrierefreiheit bei Farbenblindheit, sondern auch Best Practice für das gesamte UI-Design. Sie werden feststellen, dass Kontraste durch Helligkeit und Tonwert – statt nur durch Pigmentierung – auch ästhetisch ansprechender sein können. 

Um besser zu verstehen, wie Sie Helligkeits- und Tonwertkontraste auf Ihrer Seite umsetzen, betrachten Sie sie in Graustufen.

7. Vermeiden Sie bestimmte Farbkombinationen

Da Farbenblindheit Menschen unterschiedlich betrifft, reicht es nicht aus, nur bestimmte Farbtöne zu vermeiden. Es gibt bestimmte Farbkombinationen, die für farbenblinde Nutzer problematisch sein können. Zu den gängigen Kombinationen, die Sie vermeiden sollten, gehören:

• Grün/Rot

• Grün/Blau

• Grün/Schwarz

• Grün/Braun

• Grün/Grau

• Hellgrün/Gelb

• Blau/Lila

• Blau/Grau

Wann immer möglich, sollten Sie eine farbenblindfreundliche Palette und zugängliche Farben verwenden. Sollten Sie dennoch eine der oben genannten Farbkombinationen nutzen, stellen Sie alternative Methoden zur Informationsvermittlung bereit, wie Untertitel, Beschriftungen, Fokuselemente oder Icons.

Stilisierte Versionen derselben Webseite. Eine Version hat viele verschiedene Farben, die andere ist komplett blau.

8. Setzen Sie auf Minimalismus

Verschiedene Farbschemata und -töne auf Ihrer Website können zwar ansprechend wirken, aber auch verwirrend und frustrierend für Menschen mit Farbenblindheit sein. Sie können dennoch kreativ sein, indem Sie sich an eine Palette halten und Abstufungen, Helligkeit und Tonwert nutzen. Neben der verbesserten Barrierefreiheit für Menschen mit Farbsehschwäche kann ein minimalistisches Design Ihre Seite auch moderner, professioneller und ästhetisch ansprechender wirken lassen.

Warum Barrierefreiheit für Farbenblindheit wichtig ist

Farbenblindheit betrifft einen großen Prozentsatz der Menschen weltweit, was bedeutet, dass Website-Betreiber sowohl rechtlich als auch ethisch verpflichtet sind, eine farbenblindfreundliche Website zu erstellen. 

Aus rechtlicher Sicht entspricht eine farbenblindfreundliche Website den im Equality Act 2010 referenzierten Richtlinien sowie den Accessibility Regulations 2018 für öffentliche Einrichtungen. Die Einhaltung dieser Richtlinien kann helfen, das Risiko teurer rechtlicher Schritte wie Klagen und Abmahnungen zu verringern.

Für Nutzer verbessert eine farbenblindfreundliche Website das Gesamterlebnis. Solche Seiten sind meist minimalistischer, übersichtlicher und besser organisiert mit besserer Navigation und Lesbarkeit. Mit einer benutzerfreundlicheren Website erweitern Sie Ihre Zielgruppe, was zu mehr Umsatzmöglichkeiten und einem besseren Ruf Ihres Unternehmens führen kann.

Testen und Feedback

Während Sie Ihre Website gestalten oder aktualisieren, ist es wichtig, regelmäßig den Farbkontrast zu testen. Tools wie ein Farbkontrast-Checker sind ein guter Anfang. Diese Tools geben einen Überblick darüber, wo Ihre aktuellen Kontrastwerte liegen und wo Verbesserungen möglich sind.

Um jedoch ein wirklich barrierefreies Design zu schaffen, ist es entscheidend, Menschen mit Farbsehschwäche sowohl in den Design- als auch in den Testprozess einzubeziehen. So erhalten Sie authentisches Feedback zur Barrierefreiheit Ihrer digitalen Inhalte und können Probleme identifizieren, die Software möglicherweise nicht erkennt. Ziehen Sie in Erwägung, lokale Organisationen oder soziale Medien zu nutzen, um farbenblinde Personen für den Testprozess zu gewinnen.

Sammeln Sie beim Testen Ihrer digitalen Inhalte regelmäßig Feedback zur Barrierefreiheit für Farbenblindheit. Nutzen Sie Umfragen oder Feedback-Formulare, um deren Erkenntnisse zu erfassen. Diese Erkenntnisse können Sie dann in Ihre Überarbeitungen einfließen lassen, um die Barrierefreiheit Ihrer Seite kontinuierlich zu verbessern.

AudioEye für bessere Barrierefreiheit bei Farbenblindheit nutzen

Das Design für Barrierefreiheit bei Farbenblindheit optimiert die Nutzererfahrung Ihrer Website für alle Nutzer. Mit AudioEye ist es einfach, eine zugängliche Website für Menschen mit Farbenblindheit zu erstellen. Unser Farbkontrast-Checker prüft, ob Ihre Farbkombinationen für Menschen mit Farbenblindheit oder anderen Sehbehinderungen zugänglich sind und ob sie den WCAG-Standards entsprechen. Das vereinfacht die Erstellung benutzerfreundlicher, barrierefreier Farbpaletten. 

Zusätzlich zu unserem Farbkontrast-Checker bieten AudioEyes automatisierte Korrekturen in Echtzeit Lösungen für häufige Barrierefreiheitsprobleme – auch solche, die mit schlechtem Farbkontrast zusammenhängen. Unsere Experten-Korrekturen ergänzen automatisierte Tests, indem Barrierefreiheitsexperten und Mitglieder der Behindertengemeinschaft Fehler finden und beheben. Zusammen verbessern diese Tools die Nutzererfahrung für Menschen mit Behinderungen, einschließlich solcher mit Farbsehschwäche. 

Möchten Sie prüfen, ob Ihre Website für Menschen mit Farbenblindheit zugänglich ist? Nutzen Sie unseren Farbkontrast-Checker. 

Sie möchten mehr Tipps für barrierefreies Webdesign? Schauen Sie sich AudioEyes Ultimativen Leitfaden für barrierefreies Webdesign an – dort finden Sie alles von Farbkontrastverhältnissen bis zu zugänglichen Links.