# Farbenblindfreundliche Farbpaletten und wie du Designs testest [Canonical HTML page](https://gradiently.design/de/guide/color-blindness-design) Die meisten Farbsehschwächen bedeuten nicht, in Grau zu sehen. Bestimmte Farbpaare fallen zu einer Farbe zusammen. Wähle Farben mit unterschiedlicher Helligkeit, und du umgehst das Problem. ## The short version - Eine farbenblindfreundliche Palette nutzt Farben, die sich deutlich in der Helligkeit unterscheiden, nicht nur im Farbton, damit sie unterscheidbar bleiben, wenn manche Farbtöne gleich aussehen. - Die Rot-Grün-Schwäche ist mit Abstand die häufigste Farbsehschwäche; eine Blau-Gelb-Schwäche ist viel seltener, und gar keine Farben zu sehen ist noch seltener. - Die Palette von Okabe und Ito mit acht Farben wurde so entworfen, dass sie bei den häufigen Formen der Farbenblindheit unterscheidbar bleibt, und sie ist frei nutzbar. - Lass Farbe nie allein eine Bedeutung tragen: Ergänze ein Label, ein Icon, ein Muster oder eine Position. - Die Entwicklertools von Chrome und Edge simulieren mehrere Formen der Farbenblindheit auf jeder Seite, und ein Graustufentest findet die meisten Probleme in Sekunden. Eine **farbenblindfreundliche Palette** ist eine Reihe von Farben, die für Menschen unterscheidbar bleiben, die bestimmte Farbtöne verwechseln, meist Rot und Grün. Der Trick: Trenne Farben nach Helligkeit und nach Farbton, und lass Farbe nie das einzige Signal sein. Ein dunkles Blau und ein helles Orange bleiben für fast alle verschieden; ein mittleres Rot und ein mittleres Grün mit ähnlicher Helligkeit können wie dasselbe trübe Braun aussehen. Unten findest du Paletten zum Kopieren, Paare, die du meiden solltest, und drei kostenlose Wege, deine Arbeit zu testen. ## Formen der Farbenblindheit, kurz erklärt Farbsehen beruht auf drei Arten von Zapfen im Auge, grob auf lange, mittlere und kurze Wellenlängen abgestimmt. Fehlt eine Art oder ist sie verschoben, sehen manche Farben, die für die meisten Menschen verschieden wirken, plötzlich gleich aus. Der [WebAIM Artikel über Farbenblindheit](https://webaim.org/articles/visual/colorblind) erklärt die Biologie; fürs Design zählt diese Tabelle. | Form | Betroffene Zapfen | Verwechselte Farben | Häufigkeit | | --- | --- | --- | --- | | Deuteranomalie und Deuteranopie | Grün (mittel) | Rot mit Grün, Grün mit Braun, Blau mit Lila | Am häufigsten | | Protanomalie und Protanopie | Rot (lang) | Rot mit Grün und Schwarz, Rot wirkt dunkler | Häufig | | Tritanomalie und Tritanopie | Blau (kurz) | Blau mit Grün, Gelb mit Rosa oder Grau | Selten | | Achromatopsie | Alle | Alles erscheint in Grautönen | Sehr selten | Rot- und Grünschwächen werden über das X-Chromosom vererbt, deshalb sind sie bei Männern weit häufiger als bei Frauen. Der gemeinsame Nenner: Der Farbton wird unzuverlässig, aber **die Helligkeit bleibt erhalten**. Ein Mensch mit Deuteranopie sieht weiterhin klar, dass eine Farbe dunkler ist als eine andere. Diese eine Tatsache bestimmt jede Regel unten. ## Eine farbenblindfreundliche Palette zum Kopieren Das bekannteste sichere Set ist die Palette, die Masataka Okabe und Kei Ito für wissenschaftliche Abbildungen vorgeschlagen haben. Ihre acht Farben wurden so gewählt, dass sie bei den häufigen Formen der Farbenblindheit unterscheidbar bleiben, und sie funktioniert genauso gut für Diagramme, Karten, Labels und Statusfarben in einem Produkt. - Schwarz #000000: #000000 - Orange #e69f00: #e69f00 - Himmelblau #56b4e9: #56b4e9 - Blaugrün #009e73: #009e73 - Gelb #f0e442: #f0e442 - Blau #0072b2: #0072b2 - Zinnoberrot #d55e00: #d55e00 - Rötliches Lila #cc79a7: #cc79a7 Die Palette von Okabe und Ito. Nutze so wenige Farben wie nötig; vier oder fünf sind für alle angenehmer als acht. Für Markenarbeit sind acht Farben meist zu viele. Das sicherste Einzelpaar ist **Blau und Orange**: Sie liegen auf entgegengesetzten Seiten der Rot-Grün-Verwechslungslinie und unterscheiden sich in der Helligkeit, daher wirken sie für fast alle verschieden. Blau mit Gelb sowie dunkles Lila mit hellem Grün halten ebenfalls gut. ### Verläufe und Skalen für Daten Für Heatmaps und Diagramme, die einen Bereich zeigen, nutze eine Skala, deren Helligkeit sich von einem Ende zum anderen gleichmäßig ändert. Eine Skala von Rot nach Grün scheitert doppelt: Die Enden verwirren farbenblinde Leser, und beide Enden sind ähnlich hell. Blau nach Orange oder ein einzelner Farbton von dunkel nach hell funktioniert für fast alle. - Meiden: Rot nach Grün: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)` - Sicher: Blau nach Orange: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)` - Sicher: dunkles Lila nach Gelb: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)` Die letzte Skala folgt den weit verbreiteten Viridis-Farben: Ihre Helligkeit steigt gleichmäßig, daher übersteht sie sogar einen Druck in Graustufen. ## Paare, die du meiden solltest, und was stattdessen Manche Kombinationen machen immer wieder Ärger. Das Rot `#d7263d` und das Grün `#2e9e44` oben sehen für die meisten Menschen klar verschieden aus, aber ihre wahrgenommene Helligkeit ist fast gleich (rund 57 % und 62 % in [OKLCH](https://gradiently.design/de/guide/oklch-explained)), sodass für jemanden mit Deuteranopie kaum etwas bleibt, um sie zu unterscheiden. ### Nicht nebeneinander - Rot und Grün mit ähnlicher Helligkeit - Grün und Braun - Blau und Lila - Hellgrün und Gelb - Rosa und Grau oder Gelb und Hellgrau ### Stattdessen - Blau und Orange - Dunkelblau und Hellgelb - Dunkles Lila und Hellgrün - Ein Farbton in klar verschiedenen Helligkeitsstufen - Jedes Paar plus Label oder Icon Wenn deine Markenfarben Rot und Grün sind, musst du sie nicht ändern. Mach eine davon deutlich dunkler als die andere, und nutze sie nie als einzigen Unterschied, etwa zwischen Gewinn und Verlust. Ein Pfeil oder ein Plus- und Minuszeichen löst das für alle. Wie du die Farben überhaupt auswählst, steht in [Markenfarben wählen](https://gradiently.design/de/guide/how-to-choose-brand-colors). ## Verlass dich nie allein auf Farbe Das ist die wichtigste Regel, und sie ist auch Teil der Web Content Accessibility Guidelines. Wenn sich eine Diagrammlegende, ein Formularfehler, ein Badge „auf Lager“ oder eine Karte nur durch Farbe unterscheidet, verlieren manche Leser die Bedeutung. Ergänze ein zweites Signal: - **Labels** direkt an Linien und Balken im Diagramm statt einer Farblegende. - **Icons** für Zustände: ein Haken für Erfolg, ein Kreuz oder Warnzeichen für Fehler. - **Muster oder Linienstile**, etwa gestrichelte und durchgezogene Linien, in Diagrammen. - **Position und Reihenfolge**, damit das erste Element immer dasselbe bedeutet. - **Textkontrast**, der für sich besteht, geprüft mit einem [Kontrastprüfer](https://gradiently.design/de/guide/color-contrast-accessibility). Social-Media-Grafiken brauchen dieselbe Sorgfalt. Ein Post, der „Grün heißt verfügbar“ über einem rot-grünen Kalender sagt, verliert einige Leser. Worte tragen das besser, und die Worte selbst müssen sich vom Hintergrund abheben, besonders auf Verläufen, wo sich der Kontrast über das Bild hinweg ändert. [Text auf Verläufen](https://gradiently.design/de/guide/text-on-gradient) erklärt das ausführlich. Eine Workshop-Ankündigung, deren Überschrift auf einem unruhigen Teil des Verlaufs mit wenig Helligkeitskontrast steht Liegen Schrift und Hintergrund in der Helligkeit nah beieinander, leistet der Farbton die ganze Arbeit, und genau den verlieren manche Leser. Dieselbe Workshop-Ankündigung mit einer ruhigeren, dunkleren Fläche hinter der Überschrift, sodass sie klar lesbar ist Mit einer ruhigen, tieferen Fläche hinter den Worten entsteht der Kontrast über die Helligkeit, und die sieht jeder Leser. Die rechte Version macht ein Gradiently Mark von selbst: Er schiebt seine ruhigste, kontrastreichste Fläche hinter den Text, und die automatische Schriftfarbe wählt für jede Zeile helle oder dunkle Schrift, sodass die Trennung aus der Helligkeit kommt statt aus dem Farbton. ## So testest du ein Design auf Farbenblindheit 1. **Mach den Graustufentest** Exportiere das Design oder mach einen Screenshot und wandle ihn in Graustufen um. Werden zwei Farben mit verschiedener Bedeutung zum selben Grau, ändere die Helligkeit einer davon. 2. **Im Browser simulieren** Öffne in Chrome oder Edge die Entwicklertools, rufe das Befehlsmenü auf, tippe Rendering und nutze **Emulate vision deficiencies**, um die Live-Seite als Protanopie, Deuteranopie, Tritanopie oder Achromatopsie zu sehen. 3. **Den ganzen Bildschirm in Grau prüfen** Mac und Windows haben in den Bedienungshilfen einen Graustufenfilter. Schalte ihn ein, um Apps, Designdateien und Exporte zu prüfen, nicht nur Webseiten. 4. **Farbe entfernen und neu lesen** Frag dich, ob jedes Diagramm, jedes Badge und jeder Status allein mit Labels und Icons noch Sinn ergibt. Wenn ja, ist Farbe Dekoration, und genau da gehört sie hin. Simulationen sind Annäherungen, und Farbsehen ist von Mensch zu Mensch verschieden. Wenn Barrierefreiheit für dein Produkt zählt, bitte farbenblinde Menschen, die du kennst, sich das echte Ergebnis anzusehen. Speziell für Diagramme findest du in [Infografik-Design](https://gradiently.design/de/guide/infographic-design) mehr zu Beschriftung und Layout, und [Farbharmonie](https://gradiently.design/de/guide/color-harmony) hilft, wenn du eine sichere Palette brauchst, die trotzdem durchdacht wirkt. ## FAQ ### Welche Farben sind für farbenblinde Menschen am besten? Blau und Orange sind das sicherste Paar, gefolgt von Blau und Gelb. Wähle vor allem Farben, die sich deutlich in der Helligkeit unterscheiden, damit sie auch dann unterscheidbar bleiben, wenn Farbtöne gleich aussehen. ### Was ist die Okabe-Ito-Palette? Ein Set aus acht Farben (Schwarz, Orange, Himmelblau, Blaugrün, Gelb, Blau, Zinnoberrot und rötliches Lila), das bei den häufigen Formen der Farbenblindheit unterscheidbar bleiben soll. ### Welche Farben sollte ich nicht kombinieren? Rot mit Grün, Grün mit Braun, Blau mit Lila und Hellgrün mit Gelb, besonders wenn sie ähnlich hell sind. ### Wie sehe ich mein Design so, wie ein farbenblinder Mensch es sieht? Öffne in den Entwicklertools von Chrome oder Edge das Panel Rendering und wähle eine Option unter Emulate vision deficiencies. Auch ein schneller Screenshot in Graustufen zeigt Farben, die nur vom Farbton abhängen. ### Muss ich rote und grüne Markenfarben ändern? Nein. Mach eine spürbar dunkler als die andere und ergänze Labels oder Icons überall dort, wo die Farben eine Bedeutung tragen.