Zum Inhalt springen

Farbenblindheit-Simulator

Lade ein Bild oder einen Screenshot hoch oder teste deine Palette und vergleiche sofort, wie sie bei Protanopie, Deuteranopie, Tritanopie und Achromatopsie aussieht. Farben, die sich verwechseln lassen, werden automatisch markiert.

Oder per Drag & Drop hierher ziehen

Die Datei muss JPEG, PNG, WebP oder SVG sein und darf maximal 40 MB groß sein

Kein Bild zur Hand? Probier ein Beispiel aus:

Sehtyp

Konflikte gefunden: Deuteranopie, Tritanopie, Achromatopsie

Was Farbenblindheit ist und warum sie im Design wichtig ist

Farbenblindheit (oder Farbsehschwäche) beeinträchtigt die Fähigkeit, bestimmte Farben zu unterscheiden, meist Rot und Grün, wobei es auch Formen gibt, die andere Töne betreffen. Es ist keine einheitliche Erscheinung: Es gibt mehrere Typen mit jeweils eigenem Verwechslungsmuster, und sie betrifft etwa 1 von 12 Männern und 1 von 200 Frauen.

Das hat direkte Folgen für jedes Projekt, in dem Farbe etwas vermittelt: Eine Kombination, die für dich klar unterscheidbar ist, kann für einen realen Teil deines Publikums nahezu identisch wirken. Ein roter „Fehler“-Button auf grünem Hintergrund etwa kann für jemanden mit Deuteranopie unsichtbar sein.

Die Typen der Farbenblindheit erklärt

Protanopie

≈ 1 % der Männer

Fehlende oder verminderte Rotempfindlichkeit. Rottöne wirken dunkler und können mit Grün- oder Brauntönen verwechselt werden.

Deuteranopie

≈ 1 % der Männer

Fehlende oder verminderte Grünempfindlichkeit. Der häufigste Typ; Rot und Grün sind schwer zu unterscheiden.

Tritanopie

Sehr selten

Fehlende oder verminderte Blauempfindlichkeit, deutlich seltener als die beiden vorherigen. Betrifft die Unterscheidung von Blau und Gelb.

Achromatopsie

≈ 1 von 30.000

Völliges Fehlen des Farbsehens, viel seltener. Die Person nimmt die Welt in Graustufen wahr.

Den Simulator in drei Schritten nutzen

  1. Bild oder Palette hochladen

    Ziehe ein Bild hinein, füge einen Screenshot mit Strg + V ein oder nutze eines der Beispiele. Ohne Bild kannst du direkt die Farben deiner Palette testen.

  2. Sehtyp wählen

    Mit „Alle“ vergleichst du die vier Typen gleichzeitig. Wähle einen bestimmten, um ihn größer neben dem Original zu sehen.

  3. Konflikte beheben

    Verwechselbare Farben werden mit einem Hinweis markiert. Wähle eine aus und passe sie im Editor an, bis der Hinweis verschwindet.

So gestaltest du mit Blick auf Farbenblindheit

Jedes Beispiel zeigt eine falsche und eine richtige Version, so wie sie eine Person mit Deuteranopie, dem häufigsten Typ, sehen würde (die dritte in Graustufen).

  • Informationen nicht nur über Farbe vermitteln

    Eine Statusampel in Grün, Bernstein und Rot wirkt fast einheitlich. Ergänze Icons, Text oder unterschiedliche Formen.

  • Rot und Grün nicht als einziges Paar

    Um zwei Datenreihen zu vergleichen, lassen sich Blau und Orange bei allen häufigen Formen der Farbenblindheit unterscheiden.

  • Auch über Helligkeit unterscheiden

    Haben zwei Farben dieselbe Helligkeit, sind sie in Graustufen gleich. Kombiniere eine dunkle mit einer hellen.

  • Diagramme mit Beschriftungen oder Mustern versehen

    Eine direkte Beschriftung oder Schraffur macht das Diagramm lesbar, auch wenn sich die Farben ähneln.

Häufige Fragen

Eine Erscheinung, die es erschwert, bestimmte Farben zu unterscheiden. Die Haupttypen sind Protanopie, Deuteranopie, Tritanopie und Achromatopsie, jeder mit eigenem Verwechslungsmuster.

Beide beeinträchtigen die Unterscheidung von Rot und Grün, aber aus unterschiedlichen Gründen: Protanopie verringert die Rotempfindlichkeit, Deuteranopie die Grünempfindlichkeit. Optisch sind die Ergebnisse ähnlich, aber nicht identisch.

Etwa 1 von 12 Männern und 1 von 200 Frauen. Damit ist sie eine der häufigsten visuellen Barrierefreiheitsthemen, die man berücksichtigen sollte.

Bei Protanopie und Deuteranopie am häufigsten Rot und Grün, Grün und Braun, Blau und Violett sowie Orange mit Hellgrün. Bei Tritanopie vor allem Blau mit Grün und Gelb mit Hellrosa.

Nutze Farbpaare, die sich auch in der Helligkeit unterscheiden, etwa Blau und Orange statt Rot und Grün, und verlass dich nicht nur auf Farbe: Ergänze Beschriftungen, Icons oder Muster. Lade danach einen Screenshot in den Simulator, um es zu prüfen.

Sie ist eine Annäherung: Sie wendet auf jedes Pixel gängige Simulationsmatrizen an. Sie hilft, problematische Kombinationen zu erkennen, aber jeder Mensch nimmt Farbe etwas anders wahr, vor allem bei leichten Formen (Anomalien).

Nein. Analyse und Simulation laufen in deinem eigenen Browser; dein Bild wird an keinen externen Server gesendet und nirgends gespeichert.

Der Kontrastprüfer prüft das Lesbarkeitsverhältnis zwischen zwei konkreten Farben. Mit diesem Simulator siehst du ein ganzes Bild oder Design so, wie es ein farbenblinder Mensch wahrnehmen würde, und erkennst Verständnisprobleme, die über ein einzelnes Farbpaar hinausgehen.

Du kannst JPG-, PNG- oder WebP-Dateien hochladen, in das Werkzeug ziehen oder direkt einen Screenshot mit Strg + V (Cmd + V auf dem Mac) einfügen.

Weitere Tools