Schöne, verständliche Ampelfarben

author
3 minutes, 31 seconds Read

Jeder benutzt sie: Grün, Gelb (oder Orange) und Rot. Wir verwenden sie in der Datenvisualisierung, wir verwenden sie in Schaltflächen, wir färben Texte und Symbole mit ihnen und setzen sie in Warnmeldungen ein. Sie werden oft in entscheidenden Momenten verwendet, wenn wir Erfolge verkünden oder schlechte Nachrichten überbringen. Wir missbrauchen sie auch, um die Aufmerksamkeit auf etwas zu lenken, das nicht relevant ist. Was wir viel zu oft nicht tun, ist, sie zugänglich zu machen.

Eine bedeutende Minderheit von Menschen ist farbenblind, und die meisten von ihnen sind rot-grün-blind. Seit 2011 muss ich die Zugänglichkeit von Farben bei wichtigen Interaktionen sicherstellen, z. B. bei Warnmeldungen zu den Vitalwerten von Patienten, zur Qualität der Patientenversorgung, zum Status von Cloud-Servern oder zu Vertriebsanalysen für Führungskräfte. Im Folgenden finden Sie einige Tipps zur Barrierefreiheit, die ich auf diesem Weg aufgeschnappt habe, sowie meine persönliche Vorlage für eine brauchbare, barrierefreie Farbpalette für den Verkehr.

Sie können eine schöne, farbenblindfreundliche Palette entwerfen, aber es schadet nie, die Botschaft zu verstärken. Anstatt Text in Rot oder Grün zu ändern, setzen Sie ein anders geformtes rotes oder grünes Symbol neben den Text. Selbst wenn Sie keine Kontrolle über Ihre Farbpalette haben, das Diagramm in Schwarz-Weiß gedruckt wurde oder der Benutzer nur in Grautönen sieht, haben Sie auf diese Weise Ihren Standpunkt deutlich gemacht.

Beispiel: Excel. Excel bietet Symbole in Ampelfarben, die Ihnen helfen, Ihre Daten darzustellen. Achten Sie darauf, dass Sie sowohl unterschiedlich geformte Symbole als auch unterschiedliche Farben verwenden! Hier der Grund:

Desktop Excel, Office 2013. Achten Sie auf die roten und grünen Kreise – konnten Sie sie leicht unterscheiden? Microsoft hat dieses Problem in späteren Versionen behoben.

Deuteranopie und Protanopie sind zwei häufige Formen der Rot-Grün-Farbenblindheit. Testen Sie Ihre Farben gegen sie wird für die meisten Ihrer Benutzer zu optimieren, aber Symbole helfen, den Deal zu besiegeln.

Vertrauen Sie nicht voreingestellten Farbpaletten

Es gibt viele äußerst nützliche Frameworks und Boilerplates online. Jedes erfüllt viele Bedürfnisse, aber nicht alle haben die Zeit gehabt, ihre Farben für Farbenblindheit zu optimieren.

Beispiele für beliebte voreingestellte Farbthemen, die nicht auf Barrierefreiheit bei der Farbverwendung geprüft wurden. (Oder: „Warum man Orange nicht verwenden sollte.“)

Die wichtigste Frage bei der Betrachtung Ihrer Rot-, Grün-, Orange- und Gelbtöne lautet: „Werden meine Benutzer diese Farbe erkennen, wenn sie sie alleine sehen?“ Vertrauen Sie nicht darauf, dass die Leute, die Ihr Framework erstellt haben, daran gedacht haben. Probieren Sie es selbst aus.

Wie macht man das, fragen Sie? Viele Jahre lang war die einzige Lösung, die ich zum Testen gefunden habe, Adobes Photoshop, das eine protanopische und eine deuteranopische Ansicht dessen bot, was ich gerade erstellte. Die Optionen befinden sich unter Ansicht → Proof-Setup (siehe Bild unten).

Screenshot: Die Farbenblindheitsvorschau in Adobe Photoshop.

Jetzt ist der Corblindor Coblis (Farbenblindheitssimulator) mein bevorzugtes Werkzeug geworden. Machen Sie einfach einen schnellen Screenshot Ihrer Arbeit und sehen Sie, wie sie für viele verschiedene Arten von Farbenblindheit aussieht.

Planen Sie im Voraus mit einer Farbvorlage

Ich habe im Laufe der Jahre viel mit der Farbgestaltung von Datenvisualisierungen gearbeitet, und es hat sich ein Muster herausgebildet, das ich hilfreich finde. Ich biete es hier an, um die Nutzbarkeit von Daten zu verbessern. Ich empfehle dringend, diesen Ansatz zu berücksichtigen, wenn Sie eine Markenfarbpalette entwickeln.

Beachten Sie, wie hell vs. dunkel und warm vs. kühl Rot und Grün unterscheiden. Ihr Gelb sollte deutlich heller sein als Ihr Rot oder Grün!

Hier sind die wichtigsten Richtlinien:

  • Verwenden Sie einen hellen, mittleren und dunklen Farbton. Ihr Gelb sollte Ihr heller Farbton sein.
  • Verwenden Sie ein warmes Grün und ein kühles Rot oder ein kühles Grün und ein warmes Rot. Nimm nur nicht beide kühl oder beide warm.
  • Kein Orange. Weil es so viel heller ist, ist es viel unwahrscheinlicher, dass Ihre „Warn“-Farbe mit Ihrem „Erfolgs“-Grün für farbenblinde Benutzer in Konflikt gerät oder zu sehr wie Ihr „ernsthaftes Problem“ (Fehler, z.B.) Rot aussieht.

Das war’s! Vielen Dank fürs Lesen. Viel Spaß beim Erzählen guter Geschichten mit Ihren Daten.

Similar Posts

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.