In diesem Post geht es um Farbenblindheit, „Color Blindness“, Farbsehschwäche oder „Color Vision Deficiency (CVD)“, auch als Farbenfehlsichtigkeit (Dyschromatopsie, Dyschromasie) bezeichnet. In den meisten kaukasischen Gesellschaften in Europa ist bis zu 1 von 10 Männern betroffen, aber nur 1 von 100 Inuit („Eskimos“) ist farbenblind.
Doch warum behandeln wir das Thema in unserem Blog? Farbenblindheit betrifft einen nicht zu unterschätzenden Anteil von Webseitenbesuchern, die manchmal grosse Probleme, eine Website zu bedienen — aufgrund der nicht-barrierefreien Gestaltung. Wir zeigen, wie Sie Farbsehschwäche beim Branding oder Webdesign leicht berücksichtigen können.
- Die Herausforderung für Webdesigners — Warum Farbenblindheit ein Thema ist.
- Beispiele und Design-Strategien für mehr Barrierefreiheit
- Tipps, Tricks und Tools für Designer, um Farbsehschwächen besser berücksichtigen zu können.
- Update März 2026: Neue Standards, Tools & Forschung
Mit diesem kleinen Webdesign für barrierefreies Internet erhalten Sie Tipps für Webdesigner, sowie Beispiele von Best Practices:
► 5 Tipps für barrierefreies Webdesign & Farbsehschwäche
1. Farbsehschwäche: Wichtig für Webdesign & Co.?
Farbsehschwächen kommen häufiger vor, als Sie vielleicht denken. Während die totale Farbenblindheit sowie Störungen im Blaubereich eher selten vorkommen, sind fast 10% aller Männer von einer Rot-Grün-Schwäche betroffen. Bei Frauen sind es nur etwa 1%.
Was ist Farbenblindheit? Vorkommen und Häufigkeit
Eine Person, die Schwierigkeiten hat, eine oder mehrere bestimmte Farben zu sehen oder diese voneinander zu unterscheiden, hat es je nach Webdesign nicht immer leicht. 80% der Betroffenen können Rot und Grün nicht unterscheiden. 20% leiden unter einer Blau-Gelb-Sehschwäche.
In Deutschland sind das insgesamt 4 Mio. Menschen, die an einer Farbenblindheit oder Farbsehschwäche leiden. Sie werden als farbenblind oder „color blind“ bezeichnet, weil Sie visuellen Nuancen nicht sehen bzw. nicht unterscheiden können.
Knapp 5% der Bevölkerung können dabei Rot und Grün nicht unterscheiden, da beides für sie als Braun oder Grau erscheint. Ein Teil der Betroffenen haben auch mit Orange- und Gelbtönen Schwierigkeiten, da diese ebenfalls Kombinationen von rotem und grünem Licht sind.
Color Blindness und das Design von Websites und Digital Content, Markenlogos oder aber auch Produktverpackungen vertragen sich nicht gut. Insbesondere, wenn Sie es Rot- und Grüntöne sind, die Ihre Corporate Design Palette dominieren, entgeht Menschen mit dieser Farbschwäche das eigentliche Branding.
„Farbenblindheit zwingt uns, im Dashboard oder auf der Website, auf die richtige Farbkombinationen zu achten.“
Urs E. Gattiker, DrKPI PageTracker
Welche Arten von Farbenblindheit gibt es?
Farbenblindheit ist eine Störung der Farbwahrnehmung, bei der die Betroffenen nicht in der Lage sind, bestimmte Farben wahrzunehmen. Sie nehmen lediglich Kontraste wahr.
- Achromasie oder vollständige Farbblindheit hat zur Folge, dass die Person nur Schwarz, Weiss und Graustufen wahrnimmt.
- Monochromasie oder Einfarbigkeit bedeutet, dass Betroffene nur eine Farbe wahrnehmen und alle Farben als „unbunt“ empfunden werden.
- Protanopie oder Rotblindheit heisst, dass Betroffene die Farbe Rot nicht wahrnehmen können und diese mit Grün verwechseln.
- Deuteranopie oder Grünblindheit bezeichnet das vollständige Fehlen der Farbwahrnehmung für die Farbe Grün, die nicht von Rottönen unterschieden werden kann.
- Tritanopie oder Blaublindheit bedeutet, dass die Farbe Blau nicht wahrgenommen wird, was zu einer Verwechslung von Blau und Gelb führt.

Was sehen Menschen mit Farbblindheit? Die normale Farbwahrnehmung im Vergleich mit verschiedenen Farbsinnstörungen: Grünblindheit (Deuteranopia), Blaublindheit (Tritanopia) und Rotblindheit (Protanopia). Farbenblindheit betrifft weltweit 2.59% aller Kinder.
2. Farbfehlsichtigkeit: Beispiele aus dem Internet
Im farbenfroh gestalteten Web wird oft nicht bedacht, dass die Wahl der Farbpalette eine echte Herausforderungen für Betroffene darstellen kann. Hervorgehobene Wörter werden im Text nicht erkannt, Grafiken sind nur mit Mühe lesbar, das Markenlogo wirkt trist und eine emotionale kann über die Farbe, die Betroffenen entgeht, wohl kaum aufgebaut werden.
Bevor wir unsere Tipps präsentieren, zeigen wir Ihnen deshalb einige Beispiele. Wir haben uns dafür drei Webseiten angeschaut und lediglich die Farben und Farbkombinationen des präsentierten Contents beurteilt.
(A) ZHAW: Barrierefreies Design von Grafiken?
Die Medienmitteilung der Zürcher Hochschule für Angewandte Wissenschaften (ZHAW) präsentiert uns eine sehr interessante Grafik. In dieser werden die Farben Rot, Grün und Orange genutzt, sodass es die Grafik kaum lesbar ist für Menschen mit einer Rot/Grün-Schwäche und durch eng aufeinander liegenden Linien leicht missinterpretiert werden kann. Das ist natürlich schade, denn die Daten zur Lebensqualität in der Schweiz im Winter 2020/21 sind sehr interessant:

Farbenblindheit: In dieser Grafik können farbenblinde Menschen die Linien nicht unterscheiden.
(B) BKW AG: Barrierefreies Corporate Design für Menschen mit Farbenblindheit?
Das Rebranding der BKW sollte für mehr Emotionen und weniger Komplexität sorgen. Dies soll gemäss der Branding-Experten von Process AG mithilfe kräftiger Farben geschehen, um Leben in die technisierte Welt zu bringen:
„Die bunte Welt der BKW setzt sich aus drei Farbstämmen in je drei Helligkeitsstufen zusammen. Das Orange des Logos wird als Akzentfarbe verwendet. Jede Anwendung verwendet einen Farbklang aus zwei der Farbstämme.“ — Process AG
Das Thema Farbenblindheit wurde dabei gänzlich vernachlässigt, wie aus der Farbpalette unten leicht ersichtlich wird.

Menschen mit Sehschwächen im Bezug auf Rot und Grün haben oft auch Schwierigkeiten mit Orange und Gelb, denn diese sind Kombinationen von rotem und grünen Licht, das aufgrund der Zapfenfehlfunktion nicht oder anders wahrgenommen wird als bei Normalsichtigen.
(C) DrKPI PageTracker: Color Blindness und Sustainability?
In diesem Beispiel geht es um unser eigenes Dashboard, das Nutzer:innen Kennzahlen zu Ihrem Digital Content und der Performance Ihrer Beitragsseiten liefert, die intuitiv verständlich sein sollen — auch für Menschen mit Farbenblindheit.
Farbenblindheit macht das Design eines Dashboards oder einer Website nicht einfach. Wenn wir die Farben zu stark mixen, machen wir die Nutzung vom Dashboard für Farbenblinde unnötig schwierig. Bestimmte Farbkombinationen können so weder auf dem Dashboard am Bildschirm noch in einem PDF-Report genutzt werden.
Aus diesem Grunde sind z.B. das Dashboard von Google Analytics oder auch das PageTracker Dashboard primär in einem leichten Blauton. Eine weitere Möglichkeit ist, Dashboards individualisierbar zu gestalten, sodass Nutzer:innen die Farben in den Darstellungen selbst wählen können. Das ist jedoch mit weitaus höheren Kosten verbunden und stellt nicht immer eine Option dar.
„Ein Dashboard ist eine visuelle Darstellung der wichtigsten Informationen, die zum Erreichen eines oder mehrerer Ziele benötigt werden. Idealerweise passt es auf einen Computerbildschirm.“
Stephen Few, 2006, S. 34
Few’s Zitat ist schon fast ein Klassiker unter Usability-Experten und Designern. Nichtsdestotrotz wird heute vieles auf dem Handy angeschaut und Nutzer:innen sind es gewohnt, zu scrollen, was das Zeug hält. Auf einem PC sollte es jedoch möglich sein, eine Tabelle oder Grafik und die Erklärungen nebeneinander und in einem Screen präsentieren zu können.
Ein barrierefreier Zugang für Farbenblinde zum DrKPI PageTracker Dashboard war uns wichtig. Deshalb haben wir die Farbpalette deutlich reduziert, damit auch Personen mit diversen Farbsehschwächen die Markierungen in Trendcharts zu unterscheiden.
Unsere Reports sind zudem so gestaltet, dass das umweltfreundlichere Drucken der Reports ohne Farbe, d.h. in Schwarz-Weiss möglich ist. Die Farben sind so gewählt, dass die verschiedenen Grautöne den höchstmöglichen Kontrast bieten und die gedruckten Charts genauso leicht zu lesen sind wie im Online-Tool selbst.
Wir versuchen damit auch, einen kleinen Beitrag zur Nachhaltigkeit zu leisten. PS.: Unsere Informationsbroschüre, in der Sie mehr über unser innovatives Online Tool für Content Marketing und Benchmarking erfahren können, haben wir interaktiv gestaltet, damit Sie einen Vorteil haben, wenn Sie diese der Umwelt zuliebe nicht ausdrucken.

Barrierefreie Farbdarstellungen im PageTracker Dashboard. Farbenblindheit wird bei modernen Tools berücksichtigt.
3. Ratgeber Farbenblindheit für Webdesigner (Update 2026)
Eine barrierefreie PDF-Datei für Behinderte auf einer Website anzubieten, ist heute Standard. Barrierefreie Farben im Webdesign oder Digital Marketing zu nutzen, ist leider bei weniger als 40% der Websites und Dashboards die Norm.
Machen Sie den Test: Suchen Sie sich 5 Websites Ihrer Wahl heraus. Unsere Wette: Ca. 4 haben Störungen der Farbwahrnehmung beim Designen der Website nicht berücksichtigt. Hinterlassen Sie uns gerne Ihre Beispiele mit Links in einem Kommentar unten. Wir würden uns sehr auf Ihre Einschätzungen zum Thema freuen.
Wir zeigen Ihnen, welche Farben Sie für mehr Barrierefreiheit im Internet nutzen können. Damit garantieren Sie den barrierefreien Zugang für Menschen mit Farbenblindheit zu den digitalen Inhalten auf Ihrer Seite.
Checkliste im Überblick:
1. Rot und Grün nicht zusammen nutzen.
2. Auch andere Farben und Farbkombinationen beachten
3. Zu viel Farbe hilft weder Ihrer Marke noch der Umwelt.
4. Achten Sie bei der Nutzung von Grafiken und Fotos auf die Farbsehschwäche.
5. Colorgrading Tools und Filter zur Überprüfung der Farbenblindheit nutzen.
5 Tipps für barrierefreies Webdesign
Nutzen Sie die folgenden Tipps gerne als Schritt-für-Schritt-Anleitung oder Checkliste, um den barrierefreien Website-Zugang für Menschen mit Farbsehschwäche zu sichern.
1. Rot und Grün nicht gleichzeitig nutzen.
Nutzen Sie rote und grüne Farbtöne mit Bedacht. Sie sind nicht per se Tabu, stellen jedoch eine Hürde dar, wenn Ihnen eine bestimmte Bedeutung beigemessen werden soll, die für das Verständnis wichtig ist. Insbesondere, wenn es um die Unterscheidung der beiden Farben geht, zum Beispiel in Grafiken, sollten Sie auf diese Farbkombination verzichten.
Auch in Texten sollten Sie diese Farbkombination nicht verwenden, um Unterscheidungen hervorzuheben. Rot-grüne Diagramme und Modelle, bei denen die Farbwahl willkürlich ist, sollten umgefärbt werden.
Mitte 2015 änderte SRF News die Darstellung der Abstimmungskarten bei Volksabstimmungen unter Berücksichtigung der Rot-Grün-Sehschwäche. Dabei wurden Grüntöne durch Blau ersetzt, um die Unterscheidung zu ermöglichen, die bei der früheren Darstellung für Betroffene unmöglich war.

Rot-Grün-Schwäche: Geänderte Darstellung der SRF News Karten zu Volksabstimmungen. Farbenblindheit erfordert strategische Farbwahl.
2. Andere Farben und Farbenblindheit beachten
Zu den Rot- und Grüntönen gehören auch Orange und Gelb, da diese andere Kombinationen von rotem und grünem Licht sind. Sie sollten deshalb auch nicht in Kombination verwendet werden, wenn die Webseitenbesucherin die Aufgabe hat, zwischen diesen zu unterscheiden.
Ebenfalls gibt es kleine Gruppe von Menschen mit Farbenblindheit, die den Unterschied von Blau- und Gelbtönen nicht wahrnehmen kann. Versuchen auf Sie auf Darstellungen, in denen die Unterscheidung dieser Farben ausschlaggebenden für das Verständnis ist, ebenfalls zu verzichten. Kombinieren Sie Blau wie im Beispiel von SRF News oben stattdessen einfach mit einer anderen Farbe als Gelb.
Ähnlich wie farbenblinde Menschen können auch KI-Agenten Farben nicht unterscheiden. Sie brauchen strukturierte, maschinenlesbare Daten — nicht visuelle Darstellungen. Auch beim Berücksichtigen von Farben wenn wir Buttons oder Websites designen braucht es eine klare Strategie.
Für das barrierefreie Webdesign für Farbenblinde ist im Allgemeinen wichtig: Funktionen und Elemente, die zwingend unterschieden werden müssen, um die Seite bedienen zu können oder eine Aufgabe zu lösen, sollten nicht allein durch ihr Farbschema Bedeutung erhalten. Wenn möglich, sollten sie mit einem weiteren Kodierungsschemata versehen werden, das unabhängig von der Farbgebung ist. Nur so schaffen Sie Website Usability auch für Menschen mit Farbsehschwächen.
3. Zu viel Farbe in PDF-Dateien hilft weder Ihrer Marke noch der Umwelt.
In der Regel wird im Web häufig mit mehr Farben gearbeitet als bei Printmedien. Visuelle Effekte wie der Einsatz von Farbe muss aber auch Mehrwert erzeugen. Wenn Sie das ganze Spektrum des Regenbogens nutzen, um Dinge hervorzuheben, geht alles Hervorgehobene in der Hervorhebung unter. Das ist nicht nur schwierig für das Markenimage, das nach Best Practice möglichst mit einer bis wenigen zentralen Farbe geprägt werden sollte, noch ist es gut für die Umwelt.
Sie können nichts dafür, wenn ein Webseitenbesucher sich entscheidet, Ihre Website auszudrucken. Doch wenn Sie längere Dokumente mit viel Text wie beispielsweise White Papers zum Download anbieten, sollten Sie darauf achten, dass beim Ausdrucken nicht zu viel Tinte verschwendet wird. Um so ärgerlicher, wenn ein Leser mit Farbsehschwäche gar nichts davon hat.
Es gilt dem KISS-Prinzip zu folgen. Keep it short & simple. Möglichst nur eine Corporate Color nutzen und mit verschiedenen Helligkeitsstufen arbeiten, um den maximalen Kontrast zu erzeugen. Den Text schwarz-weiss belassen, um die bestmögliche Lesbarkeit zu garantieren.

Karte der Ukraine — barrierefrei für Personen mit Farbsehschwäche. Mehr Beispiele für Karten, die auch für Personen mit Farbsehschwäche zugänglich sind, gibt es bei der University of Texas. Farbenblindheit wird hier berücksichtigt.
4. Achten Sie bei Grafiken, Karten und Fotos auf die Farbsehschwäche.
Fotos und Grafiken in Beiträgen sind immer hilfreich. Aktuell helfen vielerlei Landkarten unten, die Invasion der Ukraine durch Putin geografisch einzuordnen. Immer wieder werden dabei auch Rot und Grün sowie andere Kombinationen genutzt, wodurch eine Unterscheidung zum Teil erschwert ist für Menschen mit Farbsehschwäche.

Wenig aussagekräftig für Menschen mit Farbsehschwäche: Länder auf der Landkarte im Blog von Bank Cler: in sind orange, gelb, grün, rot, blau markiert. Farbenblindheit wurde nicht berücksichtigt.
Auch wenn wir Fotos nutzen, um unsere digitalen Inhalte zu gestalten, lohnt es sich, die Thematik der Farbsehschwäche zu berücksichtigen. Allerdings heisst das nicht, dass Sie auf Bilder Wiesen und Wäldern für das Nachhaltigkeitskommunikation verzichten müssen.
Beachten Sie aber, dass sich bestimmte Bilder wie das Feld voller Mohnblumen nicht so positiv auf die Betrachter auswirken, wie sie es gern hätten. Was für Normalsichtige schön ist, erinnert Farbenblinde an das, auf was sie im Leben verzichten müssen und vielleicht nie erfahren werden.
5. Tools für Neukodierung und Filter zur Überprüfung der Farbenblindheit nutzen.
Es gibt ein kostenloses Plugin für Photoshop und ImageJ, das die Neukolorierung von Bildern relativ einfach macht. So können diese für Personen mit Farbsehschwäche leicht barrierefrei gestaltet werden.
Adobe Photoshop bietet Filter zur Überprüfung der Farbenblindheit. Diese simulieren, wie ein Bild für Menschen mit Farbenblindheit aussehen wird. Grafikdesigner können das Bild dann entsprechend anpassen, z.B. den Kontrast erhöhen, um das Motiv deutlicher hervorzuheben und allgemein zugänglich zu machen.
Das kostenlose Open-Source-Programm GIMP erlaubt es ebenfalls, Bilder für Nutzer:innen mit Farbenfehlsichtigkeit zu modifizieren (Erklärungen hier).
Haben Sie einen weiteren Tipp oder ein Tool, das Sie nutzen? Hinterlassen Sie uns bitte einen Kommentar, wir würden uns sehr freuen.
Update März 2026: Neue Standards, Tools & Forschung
Seit der Erstpublikation dieses Blogposts im März 2022 hat sich einiges getan. Neue Standards, Tools und Forschungsergebnisse zeigen: Farbenblindheit ist nicht nur ein Webdesign-Thema, sondern betrifft auch die Gesundheit und medizinische Diagnostik.
WCAG 2.2 Standards (Dezember 2024)
Das W3C hat im Dezember 2024 die Web Content Accessibility Guidelines (WCAG) 2.2 veröffentlicht. Die wichtigsten Anforderungen für barrierefreie Farbdarstellungen:
- Kontrast-Ratio Minimum: 4.5:1 für normalen Text (Level AA)
- Level AAA: 7:1 für höchste Barrierefreiheit
- Nicht-Text-Kontrast: 3:1 für UI-Komponenten (Buttons, Icons)
Diese Standards sind besonders relevant für Design Systems. Wie The Pragmatic Engineer (Januar 2026) zeigt: Selbst bei einem einfachen Button müssen Entwickler entscheiden: „Do you need to adjust any decisions for color blind users?“ Diese Frage ist heute Standard in modernen Design Systems.
WCAG 2.2 Standards sind wie DSGVO eine rechtliche Pflicht. Mehr zu Compliance-Standards bei KI-Tools.
Farbenblindheit & Gesundheitsrisiken: Stanford-Studie (2026)
Eine bahnbrechende Studie von Fattah et al. (2026) in Nature Health zeigt ein alarmierendes Ergebnis: Das früheste Anzeichen von Blasenkrebs – Blut im Urin – ist für Farbenblinde unsichtbar. Dies erhöht das Risiko, an der Krankheit zu sterben, erheblich.
Warum ist das wichtig für Webdesign und digitale Gesundheit? Gesundheitsfotos, medizinische Dashboards und Diagnostik-Tools müssen barrierefrei gestaltet sein. Farbenblinde haben einen Nachteil beim Interpretieren von Gesundheitsfotos – sei es Hautveränderungen, Wunden oder eben Blut im Urin.
Purdue Hyperspectral-Tool: Fotos neu kodieren (2025)
Forscher der Purdue University haben einen Algorithmus entwickelt, der hyperspektrale Informationen aus normalen Fotos extrahiert. Das Tool kombiniert Computer Vision, Farbwissenschaft und optische Spektroskopie.
Warum ist das revolutionär? Der Algorithmus nutzt die eingebaute Smartphone-Kamera – ohne zusätzliche Hardware. Die spektrale Auflösung (ca. 1.5 Nanometer) ist vergleichbar mit wissenschaftlichen Spektrometern. Das ermöglicht die Neukodierung von Fotos für Farbenblinde – besonders wichtig für medizinische Diagnostik.
Das Paper wurde im September 2025 in der Fachzeitschrift IEEE Transactions on Image Processing veröffentlicht.
Globale Prävalenz: 2.59% aller Kinder betroffen (2025)
Eine Meta-Analyse von Jeong et al. (2025) in Ophthalmology mit über 1.7 Millionen Teilnehmern aus 56 Studien zeigt: Weltweit sind 2.59% aller Kinder von angeborener Farbsehschwäche betroffen.
- Männer: 4.38% betroffen
- Frauen: 0.64% betroffen
- Höchste Prävalenz: Ozeanien (4.37%), gefolgt von Afrika (2.86%)
- Häufigster Typ: Deutan (Grünblindheit) bei Männern (3.66%)
Diese Zahlen unterstreichen: Barrierefreies Webdesign ist kein Nischen-Thema, sondern betrifft Millionen von Menschen weltweit.
Neue Tools für Webdesigner (2024-2026)
Chrome DevTools Accessibility Features (2024)
Chrome hat eingebaute Simulationen für Protanopie, Deuteranopie und Tritanopie. So testen Sie: Chrome DevTools → Rendering → Emulate vision deficiencies.
Barrierefreiheit ist nicht nur für Farbenblinde wichtig. Auch bei KI-Chatbots müssen Design und Usability benutzerfreundlich gestaltet sein.
ColorBrewer 2.0 & Viridis
Research-backed Farbpaletten für Datenvisualisierung. APS Psychology Study (2021) empfiehlt diese Tools für wissenschaftliche Grafiken: colorbrewer2.org
Stark Plugin (Figma/Sketch)
Accessibility Checker mit Echtzeit-Kontrastprüfung. Besonders nützlich für Design Systems:Accessability Checker V. 196 2026 für Chrome Browser.
Design Systems & Accessibility Trend (2026)
Moderne Design Systems wie Material Design 3, Tailwind CSS und Fluent Design berücksichtigen Farbenblindheit standardmässig. Die Frage „Do you need to adjust any decisions for color blind users?“ ist heute Teil jeder Design-Entscheidung – von Buttons über Icons bis zu komplexen Dashboards.
Farbenblindheit betrifft nicht nur Websites, sondern auch Social Media Design wie LinkedIn, wo Grafiken und Visuals oft nicht barrierefrei sind.
Best Practices für Datenvisualisierung (2021)
Die APS Psychology Study von Hehman & Xie (McGill University) zeigt: „5% of humans have some form of color blindness.“ Ihre Empfehlungen:
- Maximally differentiable colors für kategorische Daten
- Color gradients die konsistent mit Werten skalieren
- Tools nutzen: ColorBrewer, Viridis (R Package), Colorspace
Häufig gestellte Fragen: Farbenblindheit & Webdesign
Wie viele Menschen sind von Farbenblindheit betroffen?
Weltweit sind 2.59% aller Kinder betroffen – 4.38% der Männer und 0.64% der Frauen. In Deutschland sind das ca. 4 Millionen Menschen. Die höchste Prävalenz findet sich in Ozeanien (4.37%).
Quelle: Ophthalmology Meta-Analyse 2025.
Was ist der Unterschied zwischen WCAG 2.1 und WCAG 2.2?
WCAG 2.2 (Dezember 2024) verschärft Kontrast-Anforderungen: Minimum 4.5:1 für normalen Text (Level AA), 7:1 für Level AAA. Zusätzlich: 3:1 Kontrast für UI-Komponenten wie Buttons und Icons.
Quelle: W3C WCAG 2.2.
Welche Tools kann ich kostenlos nutzen, um meine Website auf Farbenblindheit zu testen?
Chrome DevTools: Eingebaute Simulation für Protanopie, Deuteranopie, Tritanopie (Chrome DevTools → Rendering → Emulate vision deficiencies).
GIMP: Open-Source Bildbearbeitung mit Farbenblindheits-Filter.
ColorBrewer 2.0: Research-backed Farbpaletten für Datenvisualisierung (colorbrewer2.org).
Kann Farbenblindheit gesundheitliche Risiken haben?
Ja. Eine Stanford-Studie (2026) zeigt: Farbenblinde können Blut im Urin nicht erkennen – das früheste Anzeichen von Blasenkrebs. Dies erhöht das Sterberisiko erheblich. Auch bei Hautveränderungen oder Wunden haben Farbenblinde einen Nachteil.
Quelle: Nature Health (2026).
Welche Farben sollte ich auf meiner Website vermeiden?
Vermeiden Sie Rot-Grün-Kombinationen (80% der Farbenblinden betroffen) und Blau-Gelb-Kombinationen (20% betroffen). Nutzen Sie stattdessen: Blau-Orange, Schwarz-Weiss mit hohem Kontrast, oder nutzen Sie zusätzliche Kodierung (Muster, Icons, Text-Labels).
Sind moderne Design Systems barrierefrei für Farbenblinde?
Ja, moderne Design Systems wie Material Design 3, Tailwind CSS und Fluent Design berücksichtigen Farbenblindheit standardmässig. Die Frage „Do you need to adjust any decisions for color blind users?“ ist heute Standard in jedem Design-Prozess.
Quelle: The Pragmatic Engineer (2026).
Was ist das Purdue Hyperspectral-Tool?
Ein Algorithmus der Purdue University (2025), der hyperspektrale Informationen aus normalen Smartphone-Fotos extrahiert. Auflösung: 1.5 Nanometer (vergleichbar mit wissenschaftlichen Spektrometern). Besonders wichtig für medizinische Diagnostik – z.B. Bluterkennung für Farbenblinde.
Quelle: IEEE Transactions (2025).
Mehr zu barrierefreiem Webdesign finden Sie auch in unserem Beitrag über Technical SEO und Usability im Test.
❓ Frage an Webdesigner & UX-Designer
Welche Tools nutzen Sie, um Ihre Website auf Farbenblindheit zu testen? Chrome DevTools, GIMP, ColorBrewer – oder andere?
Teilen Sie Ihre Erfahrungen in den Kommentaren! Welche Herausforderungen hatten Sie bei der Umsetzung von WCAG 2.2 Standards?
KI, KMU, Strategie und Trends – kompakt erklärt.
Jetzt Newsletter abonnieren und keine Insights mehr verpassen!
Fazit
Leider gibt es bei der Gestaltung für Farbenblindheit keine Einheitslösung. Aber es gibt einige grundlegende UX-Design-Prinzipien, die man beachten kann, um Websites auch für Menschen mit Farbsehschwäche zugänglicher zu gestalten. Diese muss man schon beim Design einer Website oder eines Dashboards in die Planung mit einbeziehen.
Farben allein reichen manchmal nicht aus, um eine Botschaft zu vermitteln. Es brauch weitere Elemente und Kodierungsschemata, um die Website Usability und Zugänglichkeit zu erhöhen — auch für Menschen mit Sehschwächen.
❓ Frage an KMU & Marketer
Hat Ihre Firma beim Website-Relaunch oder Corporate Design Farbenblindheit berücksichtigt? Welche Design-Entscheidungen haben Sie getroffen?
Hinterlassen Sie einen Kommentar! Ihre Erfahrungen helfen anderen KMU, barrierefreie Websites zu gestalten.
Bleib automatisch auf dem Laufenden – neue Beiträge direkt in deinen Feed-Reader.
Ideal für Feedly, Inoreader oder Apple Podcasts.
Wir unterstützen Sie dabei, Arbeitsprozesse KI-fit zu machen – von der Kompetenzprüfung über Weiterbildung bis hin zur technischen Umsetzung und Engineering.
Literatur & Quellen
Blogposts:
Gattiker, U. E. (2026-02-18). ChatGPT & Datenschutz 2026: KMU Analyse. DrKPI Blog.
Gattiker, U. E. (2025-XX-XX). Altersüberprüfung KI-Chatbot. DrKPI Blog.
Gattiker, U. E. (2025-02-15). Ohne parallele Website scheitern KI-Agenten garantiert. DrKPI Blog.
Gattiker, U. E. (2025-XX-XX). LinkedIn Marketing KMU. DrKPI Blog.
Gattiker, U. E. (2023-08-23). Definition Strategie: Was ist eine Strategie?. DrKPI Blog.
Gattiker, U. E. (2021-05-11). Technical SEO und Usability im Test. DrKPI Blog.
Gattiker, U. E. (2018-XX-XX). SEO: Barrierefreie PDF-Dateien. DrKPI Blog.
Orosz, G. & Abernethy, K. (2026-01-13). Design Systems for Software Engineers. The Pragmatic Engineer Newsletter. Aufgerufen am 19. Feb. 2026 auf Pragmatic Engineer.
Wissenschaftliche Quellen:
Fattah, M., Alsoudi, A.F., Mruthyunjaya, P. et al. (2026-01-15). Impact of colour vision deficiency on bladder and colorectal cancer survival. Nature Health, 1, 113–119. DOI: 10.1038/s44360-025-00032-7
Few, S. (2006). Information dashboard design: The effective visual communication of data. Sebastopol, CA: O’Reilly Media. Aufgerufen am 19. Feb. 2026 auf O’Reilly.
Franz, A. (2015-07). A call for considering color vision deficiency when creating graphics for psychology reports. The Journal of General Psychology, 142(3), 194–211. DOI: 10.1080/00221309.2015.1063475
Jeong, Y.D., Cho, J., Son, Y. et al. (2025-12). Global Prevalence of Congenital Color Vision Deficiency among Children and Adolescents, 1932–2022. Ophthalmology, 132(12), 1932–2022. DOI: 10.1016/j.ophtha.2025.07.031
Kwon, S., Mok Park, S., Ji, Y., Sakthivel, H., Woo Leem, J. & Kim, Y. L. (2025). Hyperspectral Information Extraction With Full Resolution From Arbitrary Photographs. IEEE Transactions on Image Processing, 34, 5429–5441. DOI: 10.1109/TIP.2025.3597038
Stoianov, M., Silva de Oliveira, M., Lobato dos Santos Ribeiro Silva, M.C., Ferreira, M.H., de Oliveira Marques, I. & Gualtieri, M. (2019-04). The impacts of abnormal color vision on people’s life: an integrative review. Quality of Life Research, 28, 855–862. DOI: 10.1007/s11136-018-2030-1
Wong, B. (2011-06). Color blindness. Nature Methods, 8(6), 441. Aufgerufen am 31. Jan. 2022 auf Nature Methods PDF.
Studien & Berichte:
Augenärzte Bern (2019-02-19, aktualisiert 2020-09-23). Farbsehstörungen. Was sind Farbsehstörungen? Aufgerufen 26. Feb. 2022 auf Augenärzte Bern.
Hehman, E. & Xie, S.Y. (2021-12-29). Doing Better Data Visualization. APS Observer, 34(10). Aufgerufen am 19. Feb. 2026 auf APS Psychology Observer.
Martin, S. (2025-09-10). More than just an image: Purdue tech extracts hyperspectral info from conventional photos. Purdue News. Aufgerufen am 10. Feb. 2026 auf Purdue University.
National Eye Institute (2025-11-05). At a glance: Color Blindness. National Eye Institute. Aufgerufen am 19. Feb. 2026 auf NEI Eye Health.
Turbert, D. (2025-06-16). What is color blindness. American Academy of Ophthalmology. Aufgerufen am 19. Feb. 2026 auf AAO Eye Health.
W3C (2024-12-12). Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation. Aufgerufen am 19. Feb. 2026 auf W3C WCAG 2.2.
🔍 Erklärung zur KI-Nutzung
Verantwortlichkeitserklärung zur KI Nutzung:
Alle Kernideen, die kreative Ausrichtung und der intellektuelle Inhalt stammen vom Autor. KI-Tools wurden ausschliesslich zur Unterstützung bei Grammatik, Verständlichkeit und struktureller Überarbeitung eingesetzt. Jedes Element des endgültigen Werkes wurde von Urs E. Gattiker, Ph.D., DrKPI®, geprüft und genehmigt. Diese Erklärung dient der vollständigen Transparenz hinsichtlich des ethischen Einsatzes von KI im redaktionellen Prozess.
Hashtags: #Farbenblindheit #Accessibility #WCAG #Webdesign #DrKPI
11 Antworten
Lieber Urs
Diesen Aspekt habe ich noch nie bedacht.
Wahrscheinlich läßt sich eine website relativ einfach barrierefrei gestalten. Dann sieht sie vielleicht farblich etwas ungewöhnlich aus, ist aber unique und „funktioniert“ für alle gut.
Danke für diesen Input!
Lieber Wolfgang Röhr
Danke für den Input.
Sie muss ja auch nicht ein Regenbogen sein, die Website. Aber die Farben müssen abgestimmt sein, sodass eine Person mit einer Farbsehstörung die Website barrierefrei besuchen kann.
Beispielsweise, hellblau oder azure geht sehr gut mit weiss und grau.
Das wird z.B. auch von vielen Seiten von medizinischen und pharma Unternehmen genutzt
Schönen Tag
Urs
Hi, Urs here with a quick thought about your blog entry, sorry have to do it in English.
I’m on the internet a lot and I look at a lot of business websites and many do not address the color blindness issue at all.
Many of them have great content but… if you suffer from color blindness, good luck.
I think it is important to address color blindness and, especially, as it pertains to corporate websites.
Thanks Eric for commenting on our blog entry regarding color blindness.
To reiterate, color blindness is the decreased ability to see color or differences in color.
As our examples in the blog entry show, mixing certain color, such as red and green, is not a good idea.
What I am also curious about is to understand better what the reasons are that, e.g., just 1% of Inuit men suffer from this, but 10% of men from Northern Europe.
We try to prevent these mistakes, whenever we build a website or a benchmarking tool like DrKPI PageTracker: https://pagetracker.drkpi.com
It is a bit of work but manageable.
Have a great weekend and thanks for your important input.
urs
Urs,
Farbeinblindheit: Das ist ein sehr guter Punkt, der sicher bei den meisten Webseiten-Umsetzungen vergessen wird.
Auch bei mir selber trifft das zu.
Bei barrierefrei denke ich erstmal überhaupt nicht an die Farbenblindheit.
Vielen Dank für die gute Anregung, sich auch darüber mal Gedanken zu machen und diesen Punkt bei der Farbgestaltung von Websites und Corporate Designs zu berücksichtigen.
Liebe Anne
Vielen Dank für deinen Kommentar oben.
Barrierefreiheit ist ebenfalls ein sehr wichtiges Thema. Betrifft seit 2018 öffentliche Unternehmen. Ab Juni 2025 auch private Firmen wenn sie mehr als 10 Vollzeitmitarbeiter haben (kommt bald auch ein Beitrag zum Barriererefreiheitsgesetz hier im Blog – 2te Hälfte April 2023).
Farbenblindheit hat viel mit Barrierefreiheit zu tun und betrifft ja ca. 10% der Männer. Glücklicherweise können wir die Problematik einfach managen, wenn wir nicht die falschen Farben in einer Broschüre oder auf einer Website mischen/nutzen.
Vielen Dank Anne und schönen Tag wünsche ich.
Grüessli
Urs DrKPI CyTRAP
Sehr interessanter Beitrag.
Dachte diese Grafik zum Thema Accessibility und Usability ist hilfreich.
Accessibility umfasst Aspekte wie W3C-Standards, Validierungstools, Assistive Technology, Zugang zu Inhalten und gesetzliche Anforderungen.
Usability fokussiert auf Benutzerfreundlichkeit, Effizienz, Zufriedenheit, eine breite Zielgruppe und nutzerzentriertes Design.
Die Grafik ist hier: https://ixdf.org/literature/topics/accessibility-audits
Die Schnittmenge beider Bereiche bildet die User Experience (UX).
Fathima
Wie gewünscht eingebaut.
Das Diagramm zeigt die Beziehung zwischen Accessibility und Usability.
1️⃣Accessibility umfasst Aspekte wie W3C-Standards, Validierungstools, Assistive Technology, Zugang zu Inhalten und gesetzliche Anforderungen.
2️⃣Usability fokussiert auf Benutzerfreundlichkeit, Effizienz, Zufriedenheit, eine breite Zielgruppe und nutzerzentriertes Design.
3️⃣Die Schnittmenge beider Bereiche bildet die User Experience (UX).
Accessibility-Audits können automatisiert, manuell oder als hybride Prüfung durchgeführt werden. Sie helfen, Barrieren zu identifizieren und zu entfernen, verbessern die Nutzung für Menschen mit Behinderungen und stärken gleichzeitig die gesamte User Experience.
Quelle: Interaction Design Foundation (2026) – Accessibility Audits. https://ixdf.org/literature/topics/accessibility-audits