Farbenblindheit und Webdesign: Was Sie wissen sollten

Häufiger, als die meisten Designer glauben

Farbfehlsichtigkeit — umgangssprachlich Farbenblindheit genannt — betrifft rund 8 % der Männer und 0,5 % der Frauen. Das sind etwa 1 von 12 Männern und 1 von 200 Frauen und macht sie häufiger als die meisten anderen Behinderungen, die Standards zur Web-Barrierefreiheit adressieren.

Dennoch wird sie im Design routinemäßig übersehen. Teams testen mit Screenreadern und Tastaturnavigation, führen einen automatisierten WCAG-Scan durch und betrachten die Barrierefreiheitsarbeit als erledigt — ohne jemals zu prüfen, ob ihre Farbpalette für farbenblinde Nutzer lesbar ist.

Farbenblindheit zu verstehen — und was sie tatsächlich mit den von Ihnen gestalteten Web-Oberflächen macht — ist der erste Schritt, um sie zu beheben.

Die Arten und was sie bewirken

Farbfehlsichtigkeit tritt in mehreren Formen auf, und sie erzeugen nicht alle dasselbe Erleben.

Rot-Grün-Schwächen (am häufigsten)

Protanopie — vollständiges Fehlen der roten Zapfen-Photorezeptoren. Rot erscheint dunkel oder schwarz. Rot-Grün-Unterscheidungen gehen verloren.

Protanomalie — verringerte Rotempfindlichkeit. Rot, Orange und Gelb verschieben sich in Richtung Grün, und das Gesamterleben ist matter, als wäre der Rotkanal heruntergeregelt.

Deuteranopie — vollständiges Fehlen der grünen Zapfenrezeptoren. Die häufigste Form der Farbenblindheit. Grün und Rot werden verwechselt; die Welt wirkt, als sei sie durch eine gelb-braune Linse gefiltert.

Deuteranomalie — verringerte Grünempfindlichkeit. Ähnlich der Deuteranopie, aber milder. Der insgesamt häufigste Typ, der etwa 5 % der Männer betrifft.

Blau-Gelb-Schwächen (seltener)

Tritanopie — Fehlen der blauen Zapfenrezeptoren. Blau erscheint grün, und Gelb erscheint blass oder unsichtbar. Selten.

Tritanomalie — verringerte Blauempfindlichkeit. Blau-Grün und Rot-Violett werden verwechselt.

Monochromasie (sehr selten)

Achromatopsie — Fehlen aller Farbzapfenrezeptoren. Nur Helligkeit wird wahrgenommen; die Welt erscheint in Grautönen. Häufig begleitet von Lichtempfindlichkeit und verminderter Sehschärfe.

Wie Farbenblindheit gängige Web-Muster zerstört

Die Arten abstrakt zu kennen, ist weniger nützlich, als zu wissen, welche konkreten Designentscheidungen Probleme verursachen. Dies sind die häufigsten.

Fehlerzustände, die nur durch Rot angezeigt werden

Den Rahmen eines Formularfelds rot zu färben, um einen Validierungsfehler anzuzeigen, ist eines der weitverbreitetsten Muster im Webdesign. Für Nutzer mit Rot-Grün-Schwäche kann Rot auf Weiß oder Rot auf Grau nahezu unsichtbar oder von einem normalen, nicht fokussierten Zustand nicht zu unterscheiden sein.

Dies wird unmittelbar von WCAG 2.2 1.4.1 Verwendung von Farbe (Stufe A) abgedeckt: Farbe darf nicht das einzige Mittel sein, um Informationen zu vermitteln, eine Handlung anzuzeigen, eine Reaktion hervorzurufen oder ein visuelles Element zu unterscheiden.

Die Lösung ist unkompliziert: Kombinieren Sie Farbe mit einem zweiten visuellen Indikator — einem Symbol, einer Textbeschriftung, einer Änderung der Rahmenstärke oder jedem anderen nicht-farblichen Signal.

<!-- Verlässt sich allein auf Farbe: verstößt gegen 1.4.1 -->
<input type="email" class="field--error">

<!-- Farbe plus Symbol plus Text: erfüllt -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Geben Sie eine gültige E-Mail-Adresse ein.
  </p>
</div>

Unzureichender Kontrast

Geringer Kontrast ist ein von Farbenblindheit getrenntes Problem, doch beide überschneiden sich. Viele Farbpaletten, die für normale Farbsicht lesbar wirken, werden unter Farbfehlsichtigkeit noch schwerer lesbar, weil der wahrgenommene Unterschied zwischen Vordergrund und Hintergrund weiter schrumpft.

WCAG 1.4.3 verlangt ein Mindestkontrastverhältnis von 4.5:1 für normalen Text und 3:1 für großen Text. Den Kontrast mit einem Werkzeug wie dem Farbwähler der Browser-DevTools oder einem eigenen Prüfwerkzeug zu testen, ist unverzichtbar — verlassen Sie sich nicht auf visuelle Inspektion.

Datenvisualisierung, die nur über Farbe codiert

Ein Tortendiagramm mit sechs Segmenten, die nur durch Farbe unterschieden werden. Eine Karte mit einem Rot-zu-Grün-Verlauf. Ein Liniendiagramm, in dem vier Datensätze allein durch den Farbton unterschieden werden.

Für Nutzer mit Deuteranopie werden Rot und Grün ununterscheidbar. Die Bedeutung des Diagramms bricht vollständig zusammen. Mehr dazu finden Sie in unserem Leitfaden zur barrierefreien Datenvisualisierung.

Links, die sich nur durch Farbe vom Fließtext abheben

Standardmäßig unterstreichen Browser Links. Viele Designer entfernen diese Unterstreichung und verlassen sich allein auf Farbe, um Links vom umgebenden Text zu unterscheiden. Nutzer mit Farbfehlsichtigkeit — und besonders jene, die kontrastarme Themes verwenden — können Links unter Umständen gar nicht erkennen.

WCAG 1.4.1 gilt auch hier. Wenn die Linkfarbe der einzige visuelle Indikator ist (keine Unterstreichung, kein Fettdruck, kein anderes Unterscheidungsmerkmal), ist der Link für farbenblinde Nutzer nicht barrierefrei.

Die einfachste Lösung: die Unterstreichung wiederherstellen. Alternativ stellen Sie sicher, dass die Linkfarbe ausreichenden Kontrast sowohl zur Fließtextfarbe als auch zum Hintergrund hat.

Design mit Blick auf Farbenblindheit

Redundante Codierung verwenden

Fügen Sie neben der Farbe einen zweiten visuellen Kanal hinzu. In Diagrammen: Muster, Texturen oder Datenbeschriftungen ergänzen. In Statusanzeigen: Symbole hinzufügen. In Formularzuständen: Text hinzufügen. Ziel ist, dass jemand, der die Farbe vollständig aus dem Design entfernt, weiterhin alles verstehen kann.

Mit Simulationswerkzeugen testen

Chrome DevTools verfügt über eine eingebaute Farbenblindheits-Simulation. Öffnen Sie DevTools > Rendering-Panel > “Emulate vision deficiencies.” Sie können Protanopie, Deuteranopie, Tritanopie und Achromatopsie simulieren.

Figma und andere Designwerkzeuge haben ähnliche Plugins. Eine Simulation durchzuführen dauert Sekunden und offenbart oft Probleme, die in der Standardvorschau nicht sichtbar waren.

Ihre Palette als Ganzes prüfen

Testen Sie nicht nur einzelne Elementpaare. Betrachten Sie die vollständige Palette zusammen: primäre, sekundäre, Fehler-, Erfolgs-, Warn- und Informationsfarben. Sehen Fehler-Rot und Erfolgs-Grün unter Deuteranopie-Simulation ähnlich aus? Falls ja, haben Sie ein Problem — unabhängig davon, ob Ihre Kontrastverhältnisse technisch bestehen.

Problematische Kombinationen vermeiden

Besonders unzuverlässig bei Farbfehlsichtigkeit:

Rot und Grün
Grün und Braun
Blau und Violett
Grün und Grau
Grün und Schwarz

Wenn diese Paare im selben Kontext erscheinen müssen, unterscheiden Sie sie über Helligkeit oder Muster statt über den Farbton.

Was WCAG abdeckt und was nicht

WCAG deckt Farbkontrast (1.4.3, 1.4.11) und das Verbot ab, Farbe als einziges Mittel zur Informationsvermittlung zu verwenden (1.4.1). Es legt nicht fest, welche Farben Sie verwenden dürfen oder nicht, und verlangt auch nicht, dass Ihre gesamte Palette unter jeder Art von Farbfehlsichtigkeit wahrnehmbar ist.

Was es verlangt, ist, dass keine Bedeutung verloren geht, wenn Farbe entfernt wird. Das ist der praktische Test. Entfernen Sie die Farbe aus Ihrem Design. Bleibt jede Information über andere Mittel zugänglich?

Wenn die Antwort Ja lautet, haben Sie die Anforderung erfüllt. Wenn Fehlerzustände verschwinden, wenn Diagrammdaten mehrdeutig werden, wenn Links unsichtbar werden — dann haben Sie Arbeit vor sich.

Unsere Barrierefreiheits-Audits schließen die Farb-Barrierefreiheit als festen Bestandteil der Prüfung ein. Wenn Sie wissen möchten, wo Ihr aktuelles Design steht, starten Sie einen kostenlosen automatisierten Scan, um die automatisierbaren Probleme als Ausgangspunkt zu erfassen.