Farbe in einem Entwurf nutzen

Etwa 8 Prozent der Männer haben eine Rot-Grün-Sehschwäche; deshalb lässt ein Formular, das Fehler nur in Rot markiert, viele von ihnen raten.

Lass Farbe nie allein die Botschaft tragen

Das WCAG-2.2-Erfolgskriterium 1.4.1, Verwendung von Farbe, steht auf Stufe A, der grundlegendsten Stufe. Es besagt, dass Farbe nicht das einzige visuelle Mittel sein darf, um Informationen zu vermitteln, eine Handlung anzuzeigen, zu einer Antwort aufzufordern oder ein visuelles Element zu unterscheiden. Ein roter Rahmen an einem Formularfeld mit Fehler ist in Ordnung, solange es auch ein Icon oder eine Textzeile gibt, die sagt, was falsch ist. Ein Liniendiagramm mit fünf farbigen Linien braucht auch Beschriftungen, verschiedene Linienstile oder Marker. Links in einem Absatz brauchen eine Unterstreichung oder einen anderen Hinweis neben der Farbe.

Der Grund liegt teils im Farbensehen. Der Neurowissenschaftstext von OpenStax erklärt, dass manche Menschen eine genetische Variation tragen, die ihnen zwei Zapfentypen statt drei gibt oder ein Zapfenpigment, das anders arbeitet. Sie sind nicht blind für eine Farbe, aber manche Farben, die die meisten unterscheiden, sehen für sie gleich aus. Die Rot-Grün-Formen sind am häufigsten und betreffen etwa 8% der Männer. Auch andere Gründe zählen: ein Handy im hellen Sonnenlicht, ein billiger Projektor, ein Ausdruck in Schwarzweiß. Ein Entwurf, der auch in Graustufen funktioniert, funktioniert in all diesen Fällen.

Die Helligkeit leistet die Hauptarbeit

Deshalb planen erfahrene Designer eine Palette in zwei Durchgängen. Zuerst legen sie die Helligkeitsstufen fest: einen sehr hellen Hintergrund, einen mittleren Ton für Rahmen, einen dunklen Ton für Text. Dann wählen sie Farbtöne. Jedes Paar aus Text und Hintergrund mit dem Kontrastverhältnis aus Einheit 6 zu prüfen ist der schnellste Weg zu wissen, dass die Stufen weit genug auseinanderliegen. Komplementäre Farbtöne garantieren keinen Kontrast. Im Modell haben das Markenorange und sein blaues Komplement dieselbe HSL-Sättigung und -Helligkeit, und das Verhältnis zwischen ihnen beträgt nur 1.06:1. Zwei Farben können im Farbton so weit auseinanderliegen wie möglich und doch schwer aufeinander lesbar sein.

Eine einfache Arbeitsmethode fügt die Einheiten dieses Kurses zusammen. Beginne mit einem Farbton, der zum Thema passt. Nutze eine Harmonie aus Einheit 4, um ein oder zwei Begleitfarbtöne zu wählen. Gib der dominanten Farbe den größten Teil der Fläche, etwa 60%, einer zweiten Farbe 30% und einem Akzent 10%, die Faustregel aus dem Leitfaden der University of Delaware. Wähle für jedes Paar aus Text- und Hintergrundfarbe die Helligkeit, bis jedes mindestens 4.5:1 erreicht, oder 3:1 für große Überschriften und Icons. Prüfe zum Schluss, dass nichts allein von Farbe abhängt: Fehler haben Worte, Links haben Unterstreichungen, Diagramme haben Beschriftungen.

Diagramme verdienen eigene Sorgfalt, weil sie oft viele Farben auf einmal brauchen. Der Leitfaden der University of Delaware verweist auf ColorBrewer, ein Werkzeug für Karten- und Diagrammpaletten. Für Werte, die von niedrig bis hoch reichen, funktioniert eine sequenzielle Palette aus einem Farbton, der von hell nach dunkel abgestuft ist, auch in Graustufen. Für Kategorien nutze so wenige Farben wie möglich, gib jeder eine Beschriftung neben der Linie oder dem Balken statt nur in einer Legende, und halte die Helligkeitsstufen so verschieden, dass zwei Nachbarn nie gleich aussehen.