Farbenblindheits-Simulator

Lade ein Bild hoch und sieh dir die Vorschau an, wie es bei Protanopie, Deuteranopie, Tritanopie oder vollständiger Farbenblindheit aussieht, und lade dann das simulierte Ergebnis herunter.

Tool wird geladen…

Farbenblindheits-Simulator — Zieh ein Bild hinein und sieh sofort, wie es für jemanden mit Rotblindheit (Protanopie), Grünblindheit (Deuteranopie), Blaublindheit (Tritanopie) oder vollständiger Farbenblindheit (Achromatopsie) aussehen würde. Die Simulation läuft vollständig in deinem Browser auf einem Canvas, Pixel für Pixel — dein Bild wird nie auf einen Server hochgeladen, sodass selbst private Mockups und Screenshots auf deinem Gerät bleiben. Wähle einen Typ, vergleiche das Original Seite an Seite mit dem Ergebnis und lade das simulierte PNG herunter.

Was ist Farbenblindheits-Simulator?

Der Farbenblindheits-Simulator ist ein kostenloses Browser-Tool, das ein Bild so neu rendert, wie es eine Person mit einer bestimmten Farbsehschwäche wahrnehmen würde. Es unterstützt die drei häufigen Dichromasien — Protanopie (Rotschwäche), Deuteranopie (Grünschwäche) und Tritanopie (Blauschwäche) — sowie die Achromatopsie, eine vollständig monochrome (Graustufen-)Ansicht. Designer, Entwickler und Barrierefreiheits-Prüfer nutzen es, um zu kontrollieren, ob Diagramme, UI-Zustände, Statusfarben und Infografiken noch verständlich bleiben, wenn allein die Farbe die Bedeutung trägt. Da etwa einer von zwölf Männern eine Form der Farbsehschwäche hat, hilft das Simulieren dieser Ansichten vor der Veröffentlichung dabei, Designs zu erkennen, die sich zu stark auf einen Farbkontrast verlassen, der für einen Teil deines Publikums verschwindet.

So verwendest du Farbenblindheits-Simulator

  1. Zieh ein Bild auf den Upload-Bereich oder klicke darauf, um eine PNG-, JPG- oder WebP-Datei von deinem Gerät auszuwählen.
  2. Öffne das Dropdown „Farbsehtyp“ und wähle Protanopie, Deuteranopie, Tritanopie oder Achromatopsie (wähle Keine, um das unveränderte Original zu sehen).
  3. Die simulierte Vorschau aktualisiert sich automatisch neben dem Original, sodass du beide Seite an Seite vergleichen kannst.
  4. Klicke auf eine beliebige Vorschau, um sie in der zoombaren Lightbox zu öffnen und Details aus der Nähe zu prüfen.
  5. Drücke Herunterladen, um das simulierte Bild als PNG zu speichern, oder Zurücksetzen, um es zu löschen und ein anderes Bild zu probieren.

Beispiele

Ein rot/grünes Status-Badge prüfen

Lade einen Screenshot einer UI hoch, die Rot für 'error' und Grün für 'success' verwendet, wähle Deuteranopie und beobachte, wie die beiden Farben zu einem ähnlichen, matschigen Ton zusammenfallen — ein Zeichen, dass du Symbole oder Beschriftungen hinzufügen solltest, statt dich allein auf die Farbe zu verlassen.

Ein Datendiagramm überprüfen

Lade ein Linien- oder Kreisdiagramm mit mehreren Reihen, wechsle zwischen Protanopie und Tritanopie und vergewissere dich, dass jede Reihe unterscheidbar bleibt; verschmelzen die Linien, passe die Palette an oder füge Muster hinzu.

Lesbarkeitstest in vollständigen Graustufen

Wähle Achromatopsie, um das Bild nur auf die Luminanz zu reduzieren; verschwinden Text oder Schlüsselelemente, verlässt sich dein Design auf den Farbton statt auf den Helligkeitskontrast.

Häufig gestellte Fragen

Welche Arten von Farbenblindheit kann es simulieren?
Es simuliert Protanopie (Rotblindheit), Deuteranopie (Grünblindheit) und Tritanopie (Blaublindheit) mithilfe standardisierter RGB-Transformationsmatrizen sowie Achromatopsie, die das Bild in eine luminanzbasierte Graustufendarstellung umwandelt. Wählst du Keine, bleibt das Originalbild unverändert.
Wird mein Bild auf einen Server hochgeladen?
Nein. Die gesamte Simulation findet lokal in deinem Browser über ein HTML-Canvas statt — die Datei verlässt nie dein Gerät und es wird nichts an irgendeinen Server gesendet, sodass es offline funktioniert und private Bilder privat bleiben.
Welche Bildformate und welche Ausgabe kann ich verwenden?
Du kannst gängige Rasterbilder wie PNG, JPG und WebP laden. Das simulierte Ergebnis wird immer als PNG exportiert, damit Transparenz, falls vorhanden, erhalten bleibt.
Wie genau ist die Simulation?
Sie verwendet bekannte lineare Farbmatrix-Näherungen, die sich hervorragend eignen, um Probleme mit Farbabhängigkeit in UI und Grafik aufzuspüren. Sie sind eine praktische Designhilfe, kein klinisches oder medizinisches Diagnosewerkzeug, betrachte das Ergebnis also als Orientierung und nicht als exakte Wiedergabe des Sehens einer bestimmten Person.
Warum wirken die simulierten Farben gedämpft oder verschoben?
Jede Schwäche entfernt oder schwächt eine Zapfenantwort, sodass Farben, die von diesem Kanal abhängen, sich zu den verbleibenden hin verschieben. Genau dieses Zusammenfallen verschiedener Farbtöne zu ähnlichen Tönen ist der Effekt, den du vor der Veröffentlichung erkennen willst.

Verwandte Tools

Code zu Bild

Verwandle einen Code-Schnipsel direkt im Browser in eine elegante PNG-Karte mit Syntaxhervorhebung – mit Theme, Verlaufs- oder transparentem Hintergrund und Innenabstand, ganz ohne Upload.

Farbkontrast-Prüfer

Prüfe das WCAG-Kontrastverhältnis zwischen einer Vordergrund- und einer Hintergrund-HEX-Farbe und sieh, ob es AA und AAA für normalen und großen Text besteht.

Farbmischer

Mische zwei HEX-Farben in einem gewählten Verhältnis im RGB- oder Lab-Farbraum und lies die entstehende Mittelfarbe als Farbfeld und kopierbaren HEX-Wert ab.

Farbabstufungs-Generator

Verwandle eine HEX-Basisfarbe in eine Tailwind-typische Tonwertskala von 50 bis 950, gemischt zu Weiß und Schwarz, jede Stufe mit Farbfeld und kopierbarem HEX-Wert.