Farbe codieren

Prinzip // Lesbar machen

Farbe ist ein Code.

Strukturieren, akzentuieren, orientieren

Was Farbe codieren kann

Strukturieren: Was die gleiche Farbe hat, gehört zusammen.

Akzentuieren: Was als einziges farbig ist, ist wichtig.

Orientieren: Farbe zeigt, wo man ist und wohin es geht.

Farbe zum Strukturieren

Was die gleiche Farbe hat, gehört zusammen.

Achtzehn Punkte: ein Feld

Drei Farben, drei Gruppen. Die Positionen sind gleich geblieben

Sortiert wird die Struktur offensichtlich

Jede Linie eine Farbe Bahnen in Köln, KVB, 2023 — Jede Linie eine Farbe
Bahnen in Köln, KVB, 2023

Farbe ordnet Bereiche im Wegeleitsystem Krankenhaus, Foto aus dem Bestand — Farbe ordnet Bereiche im Wegeleitsystem
Krankenhaus, Foto aus dem Bestand

Farbe als technischer Code Netzwerkkabel, Grafik aus dem Bestand — Farbe als technischer Code
Netzwerkkabel, Grafik aus dem Bestand

Farbe zum Akzentuieren

Was als einziges farbig ist, ist wichtig.

Sechs gleichwertige Einträge

Eine Farbe, ein Fokus

Rot zeigt das Bauteil, um das es geht Bedienungsanleitung, aus dem Bestand — Rot zeigt das Bauteil, um das es geht
Bedienungsanleitung, aus dem Bestand

Blau zeigt den Handgriff Bedienungsanleitung, aus dem Bestand — Blau zeigt den Handgriff
Bedienungsanleitung, aus dem Bestand

Farbe zum Orientieren

Wie viele Farben kann man sich merken?

Hell, gesättigt, dunkel: Nachbarn verschwimmen schnell

Höchstens fünf bis sieben Farben als Code.

Deutlich verschieden im Farbton, mit Legende, wenn die Bedeutung nicht offensichtlich ist.

Helligkeit für Reihenfolgen.

Farbton für Kategorien.

Wenig bis viel, codiert mit Farbton: Welches Feld ist »am meisten«?

Dieselbe Reihe über Helligkeit: sofort lesbar

Faustregel nach Colin Ware: Helligkeit für Details und Reihenfolgen, Farbton für Kategorien.

Erste Grafik: Werte von wenig nach viel, codiert mit Regenbogenfarben. Frage: Welches Feld steht für »am meisten«? Niemand weiß es sicher, denn der Farbkreis hat keine Richtung. Zweite Grafik: dieselbe Reihe über die Helligkeit eines Farbtons. Die Reihenfolge ist sofort klar, auch in Graustufen.

Umgekehrt gilt: Für Kategorien ohne Rangfolge (Kalender, Projekte, Abteilungen) ist der Farbton richtig. Helligkeitsstufen würden dort eine Rangfolge vortäuschen, die es nicht gibt.

Praxis: Diagramme, Heatmaps und Status-Skalen mit Helligkeitsverläufen (»sequenzielle Paletten«), Kategorien mit gut unterscheidbaren Farbtönen (»qualitative Paletten«). Gute Vorlagen: ColorBrewer von Cynthia Brewer.

Farbe nie allein.

Nicht alle sehen dieselben Farben.

Eine Statusliste: Grün ist in Ordnung, Rot ist ein Fehler

Dieselbe Liste mit Rot-Grün-Sehschwäche (Deuteranopie, simuliert)

Farbe plus Form plus Text: lesbar für alle

Information nie nur über Farbe.

Immer ein zweites Merkmal dazu: Form, Symbol, Text oder Position. WCAG 2.2, Kriterium 1.4.1

Rund acht Prozent der Männer und etwa 0,5 Prozent der Frauen mit nordeuropäischer Herkunft haben eine Farbsehschwäche, am häufigsten eine Rot-Grün-Schwäche. In einem Hörsaal mit 100 Studierenden sind das statistisch mehrere Personen.

Die zweite Grafik zeigt die Statusliste, wie sie bei Deuteranopie (Grünblindheit) erscheint. Simulation nach Machado, Oliveira und Fernandes (2009). Rot und Grün werden zu fast demselben Olivton, der Status ist nicht mehr lesbar.

Die Lösung: Farbe plus ein zweites Merkmal. Form (Kreis gegen Dreieck), Symbol, Text (»Fehler«, »OK«), Position. Dann funktioniert der Code auch in Graustufen, bei Sonnenlicht, auf schlechten Displays und im Schwarzweißdruck.

Hintergrund

WCAG 2.2, Erfolgskriterium 1.4.1 »Use of Color«: Farbe darf nicht das einzige visuelle Mittel sein, um Information zu vermitteln, eine Aktion anzuzeigen oder ein Element zu unterscheiden. Prüfen: Farbfehlsichtigkeit simulieren, etwa mit den Entwicklerwerkzeugen von Chrome (Rendering, »Emulate vision deficiencies«) oder in Figma mit Plugins.

Wo codiert Farbe auf Ihrem Handy etwas?

Und gibt es neben der Farbe immer ein zweites Merkmal? Zu zweit, drei Minuten.

Wann trägt der Code nicht?

Bei zu vielen Farben: Nachbarn verwechselt man, Bedeutungen vergisst man.

Wenn die Farbe schon belegt ist: Rot heißt Fehler, auch wenn die Marke rot ist.

Wenn er nicht überall gleich gilt: Ein Code, der wechselt, ist keiner.

Wenn er allein steht: Ohne zweites Merkmal schließt er Menschen aus.

Verweise

Dahinter: Ähnlichkeit, Pop-out und Visuelle Variablen. Prüfen: Kontrast prüfen und Barrierefreiheit prüfen. Weiter: Farbe und Lesbarkeit.

Danke für's Mitmachen

https://christiannoss.de