Gute Farbpalette, geeignet für Farbenblinde.


13

Ich entwerfe gerade ein Diagramm, dem langsam weitere Elemente hinzugefügt werden. Ich möchte eine Liste / Reihenfolge der Farben für die Artikel erstellen, die für den Farbenblind am besten geeignet ist, um zwischen den einzelnen Artikeln zu unterscheiden. Irgendwelche Ideen, wie / wo ich anfangen soll?

Antworten:


14

Wenn Sie sich für einen "Versuch und Irrtum" -Ansatz entscheiden möchten, würde ich ein Tool mit dem Namen " Color Oracle" (plattformübergreifend) vorschlagen, das Deuteranopie- / Deuteranomalie-, Protanopie- / Protanomalie- und Tritanopietypen der Farbenblindheit auf Ihrem Computerbildschirm simuliert.

(In Photoshop sind unter ViewProof Setup(zumindest in CS5) Einstellungen für Farbblindheitsprüfungen verfügbar . Wenn Sie jedoch ein Diagramm entwerfen möchten, ist Photoshop möglicherweise etwas überfordert.)


1
+1 für Photoshop Proof Ich habe es neulich versucht. Es ist ziemlich genial
JamesHenare

Der Punkt ist, dass das Testen der richtige Ansatz ist; Die Auswahl einer "sicheren" Palette wird unnötig einschränkend sein.
Charles Stewart

7

Welche Art von Farbenblindheit versuchen Sie anzusprechen? Dieser Link

http://en.wikipedia.org/wiki/Color_blindness

Sie sollten eine gute Vorstellung von den verschiedenen Farben haben, um diese aufgrund der Art der Farbenblindheit zu vermeiden.

Im Allgemeinen kann es schwierig werden, etwas von der Wahl zwischen Blau und Grün abhängig zu machen. Vielleicht möchten Sie sehen, wie Ihr Zeug als rein monochromatisch aussieht.

Da es eine Reihe von "Farbenblindheiten" gibt, möchten Sie wahrscheinlich auch immer sicherstellen, dass Steuerelemente usw. redundant sind (z. B. sollte der große rote Knopf auch als "Selbstzerstörungsknopf" in einer schönen Kontrastfarbe (schwarz auf rot) gekennzeichnet sein oder weiß auf rot).


Guter Ruf nach Redundanz
JamesHenare

1
@Lauren: Nun, Sie können nicht vorsichtig genug sein, wenn Sie Benutzeroberflächen für Ihr böses Versteck entwerfen ...
lawndartcatcher

Ja, und stellen Sie sicher, dass Sie einen Fünfjährigen engagieren, um Ihre großartigen Pläne zu testen. :)
Lauren-Reinstate-Monica-Ipsum

5

Es gibt viele Arten von Farbenblindheit. Der Schlüssel ist, um sicherzustellen, dass es einen ausreichenden Kontrast gibt. Verlassen Sie sich noch besser nicht nur auf die Farbe - lassen Sie immer die gleichen Informationen in Form, Kontrast oder Reihenfolge der Artikel anzeigen. Wenn Ihr Bild in Schwarzweiß leicht zu verstehen ist, besteht es.


Während es technisch gesehen viele Arten gibt, weist die große Mehrheit eine Deuteranopie oder eine mildere Deuteranomalie auf. Fast alle anderen haben Protanopie oder Protanomalie. Alle oben genannten sind ein Verlust von Rot-Grün. Alle übrigen Typen zusammen (blau-gelb oder einfarbig) machen meines Wissens weniger als 0,01% der Bevölkerung aus. Daher ziele ich hauptsächlich auf normales Sehen und Deuteranopie (mit der Adobe-Simulation) und optimiere dann etwas mit der Protanopie-Simulation.
Jon Coombs

Wenn Sie Rot vollständig durch eine ansonsten nicht verwendete Farbe (normalerweise Magenta oder Orange) ersetzen, hilft dies. Android hat viel getan. (Oder Sie können Grün ersetzen.) Das Austauschen von farbigen Symbolen ist jedoch nicht einfach, wenn Sie nur in einigen Symbolen Rot (oder Grün) verwenden. (Für uns können unsere Legacy-Symbole nicht alle einfarbig sein.) Wenn Sie den Luxus austauschbarer Paletten haben, können Sie diese separat für deut optimieren. und prot. und füge sogar eine dritte Option für Tritanopie / Tritanomalie hinzu. Wenn Sie austauschbar haben, ist ein kontrastreicher Modus (heller Text auf dunklem Hintergrund) eine Menge Substitutionen, aber noch nützlicher.
Jon Coombs

4

Ich bin farbenblind. "Wir" mögen es, wenn Grafiken mit Farben genauso diskriminiert werden wie "Sie" - es gibt nur weniger Farben in unserer Welt als Ihre. Hier ist ein pragmatischer Vorschlag im Sinne der 80/20-Regel.

Wenn Ihre erste Art von Farbsensoren (Proto) nicht funktioniert, ist Ihre Sicht protoanopisch. Wenn sie sich nur ein bisschen schlecht benehmen, sind Sie proto-anomol. Wiederholen Sie diesen Vorgang für die beiden anderen Farbsensortypen und ersetzen Sie "Proto" durch "Deuter" oder "Trito". (Ich denke, das sind Griechisch für 1,2,3).

Die pragmatische Möglichkeit ergibt sich aus der Tatsache, dass Deuteranomalie sehr viel häufiger als die anderen Arten ist; 5% aller Männer. Die anderen erreichen weniger als 1% bei Männern und noch weniger bei Frauen. Eine einfache Lösung für uns Deuteranomalisten ist also ein langer Weg - ich persönlich möchte Farben nicht selbst konfigurieren müssen, um einen Unterschied in den Linien in einem Diagramm erkennen zu können. (Was die ganze Zeit passiert).

Ich habe unten eine kleine Reihe von Farben aufgenommen, mit denen ich den Unterschied zwischen mühelos erkennen kann. Ich habe erfolglos versucht, mehr einzufügen - so dass Sie eine Vorstellung davon haben, wie klein die Palette sein muss.

Nb. Vergessen Sie nicht, dass es keinen Sinn macht, in der von Ihnen erstellten Benutzererfahrung auf diese Farben mit Namen zu verweisen. Für uns Deuts - es scheint, als hätten "Sie" eine Menge unnötig duplizierter Namen für so ziemlich die gleichen Farben erfunden :-)

RGB (255, 204, 153)

RGB (204, 204, 255)

RGB (255, 102, 102)

RGB (139, 230, 2)

rot

Gelb

RGB (51, 51, 255)

RGB (153, 153, 153)

rgb (153, 0, 0)

rgb (51, 51, 51)

rgb (0, 0, 102)

RGB (120, 102, 75)


1
Das HTML-Fragment, in das ich kopiert habe, um die Farben
anzuzeigen,


2

Die häufigste Art der Farbenblindheit ist die Rot-Grün-Farbenblindheit (die ein Fehler beim Erkennen von Rot oder beim Erkennen von Grün sein kann, aber selten beides). Verlassen Sie sich also nicht auf Unterschiede im rot-grünen Teil des Spektrums. (Hellgrün und Hellorange scheinen zum Beispiel für solche Menschen gleich zu sein.)

Wenn Sie besonders vorsichtig sein möchten, können Sie Ihre Farben auf eine blau-gelbe Achse legen (sehr tiefes Blau; Aqua; Weiß; Chartreuse; Braun); Alle rot-grünen Probleme machen es dem Individuum immer noch möglich zu erkennen, dass Blau anders ist. Gelb hat den Vorteil, dass sowohl grüne als auch rote Kegel aktiviert werden. Wenn also bei beiden ein Problem auftritt, ist immer noch viel zu sehen. Alternativ ist jede Strecke, bei der die Helligkeit zunimmt (z. B. Rot-> Gelb-> Weiß), für die meisten Menschen sichtbar. Gehen Sie jedoch nicht davon aus, dass Rot anders ist als Schwarz.


2

Es gibt einige Tools für Firefox da draußen. Beispiel

Afaik, es gibt auch ein Zertifikat, das einige Richtlinien enthält. Ich habe meine Papiere durchgesehen, aber noch nicht gefunden. Google wird sicherlich etwas über die verschiedenen verfügbaren Zertifikate für Ihr Land erzählen.


2

Ich wiederbelebe dies, weil es schwierig ist, konkrete Beispiele oder Anleitungen zu finden.

Sie können Simulatoren verwenden, um dieses Ziel zu erreichen, wobei zu berücksichtigen ist, dass die Mehrheit von Deuteranopia-Zielgruppen und die Unterstützung von Protanopia nahezu alle anderen Personen abdeckt. (Ich glaube, der Rest macht weniger als 0,01% der Bevölkerung aus.)

Adobe-Produkte wie Illustrator verfügen über sehr nützliche Simulatoren (öffnen Sie ein neues Fenster und wählen Sie „Ansicht“> „Proof-Setup“> „Farbenblindheit“ ...), mit denen Sie sofort eine Live-Darstellung nebeneinander anzeigen können, während Sie Ihre Farben optimieren. Außerdem gibt es kostenlose eigenständige Tools wie den Color Contrast Analyzer.

Das Folgende ist nur ein Beispiel-Screenshot von Illustrator, der eine Sechs-Farben-Palette (wobei die sechste Farbe entweder Rot oder Magenta ist, nicht beide) und beide Simulationen zeigt. Der untere linke ist statistisch gesehen der kritischste.

Beachten Sie, dass in diesem Fall Purpur nur unwesentlich nützlich geworden ist (ziemlich verblasst und dennoch einen geringen Kontrast zu Blau und / oder Magenta aufweist). Auch die "sicherste" Option (volles Magenta anstelle von Rot) kann ziemlich laut sein. Für die meisten Menschen mit CVD kann die Einstellung der Sättigung / Helligkeit von Rot und Grün einen erkennbaren Kontrast liefern.

eine hoffentlich farbsichere Palette

(Bitte erkundigen Sie sich bei mir, bevor Sie diese Palette / das gesamte Bild erneut verwenden.)

Ich kann die Verwendung des HSL-Farbraums nur empfehlen. HSB (aka HSV) ist auch ziemlich freundlich, besonders im Vergleich zu RGB oder CMYK. (Zu Ihrer Information, in beiden Systemen sind nur die H-Farbtonwerte identisch.) Hier verwendet jede Spalte eine einzelne Farbtonnummer. Sie können die RGB-Codes später jederzeit aus Adobe extrahieren oder die hervorragenden Tools von colorizer.org verwenden . Hex-RGB-Codes sind leider die prägnantesten und direkt verwendbaren Codes für Programmierer usw., obwohl sie, wenn Sie mit CSS arbeiten, HSL (yay) direkt unterstützen.

Die Sättigung von Blau ist hier absichtlich niedrig, um (a) eine sanftere Link / Button-Farbe zu haben und (b) einen stärkeren Kontrast zu diesen gut gesättigten Magentas und Purpurfarben zu bilden. Innerhalb einer Spalte ist die Hauptvariante die Helligkeit, aber Sie können auch mit einer gewissen Variation der Sättigung davonkommen.


1

Wenn Sie nicht in Photoshop oder in einer früheren Version arbeiten, in der die oben erwähnte farbblinde Proof-Ansicht fehlt, können Sie den Helligkeitskontrast Ihres Designs überprüfen, indem Sie in Graustufen konvertieren. Wenn es sich um eine frühere Version von PS handelt, können Sie entweder eine Farbton- und Sättigungsebene verwenden, bei der die Sättigung ganz nach unten gedreht ist, oder eine Verlaufskarte, bei der Schwarz-Weiß als Verlauf verwendet wird. Fügen Sie diese Ebene als oberste Ebene in Ihr Dokument ein und aktivieren Sie sie, wenn Sie den Kontrast überprüfen möchten. Ich bevorzuge die Verlaufskarte, weil sie in Bezug auf den Kontrast der Farben in Bezug auf die Helligkeit genauer ist (Rot ist ein wenig heller, als wenn Sie nur entsättigen), aber beide können Ihnen Problembereiche im Design zeigen. Solange Ihre Seite in dieser Ansicht gut aussieht, sollte es für einen farbenblinden Benutzer in Ordnung sein.


0

Bildbeschreibung hier eingeben

Abbildung 1: Ishihara-Farbblindheitstest .

Ich habe gerade eine ähnliche Frage ausführlich beantwortet:

Was ist eine gute Quelle für Farbpaletten, die ein farbenblinder Benutzer erhalten kann?

Das grundlegende Fazit ist: Die spezifische farbenblinde Erfahrung Ihrer Nutzerbasis (da es erhebliche Abweichungen gibt) ist es wert, untersucht zu werden; Ihre Palette wird sich wahrscheinlich aus dem entwickeln, was Sie mit farbenblinden Augen sehen.

Bild verwandt:

Farbenblind gegen Trichromie


Aber es scheint seltsam, dass es angesichts der Häufigkeit einiger Formen von Farbenblindheit keine Websites gibt, auf denen nur praktische Paletten aufgelistet sind. Es fühlt sich an, als würde man das Rad jedes Mal neu erfinden.
Dumbledad

0

Ich weiß, dass ich diese Frage bereits beantwortet habe - aber ich habe sie gerade gefunden:

http://disturbmedia.com/max/colour-blindness.html

... das ist ein Farbenblindheitssimulator, der für Ihre Aufgabe besonders gut geeignet zu sein scheint. Ich sah es mir an und fühlte mich so schlecht für das Farbenblinde, dass ich gezwungen war, aus Mitgefühl an Paletten zu denken, die auch für sie funktionieren würden. Wirklich - ich scherze nicht ganz; Guck mal.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.