Farbe

Farbe trägt nie allein

Geltung

universal · web, react-native

Warum

Rund jeder zwölfte Mann sieht Rot und Grün nicht auseinander. Für ihn ist ein aktiver Tab, der sich nur durch die Textfarbe auszeichnet, kein aktiver Tab, sondern einer von fünf gleichen. Dasselbe gilt bei starkem Sonnenlicht, auf schlecht kalibrierten Bildschirmen und bei jedem, der die Ansicht nur kurz überfliegt.

Das zweite Zeichen kostet nichts. Es ist ohnehin da, sobald das Element sauber gebaut ist: der Knopf des Switch steht rechts, unter dem Tab liegt ein Strich, vor dem Chip sitzt ein Punkt. Der Fehler entsteht nur, wenn ein Zustand nachträglich „schnell über die Farbe" gelöst wird.

Für einen von zwölf Männern sehen Rot und Grün gleich aus. Eine Legende nur aus Farbfeldern ist für ihn leer.

Die Zeichen je Element

Wo ein Strich steht, hat das Element einen dauerhaften Zustand und braucht das Zeichen. Wo keiner steht, hat es keinen.

Hart und weich

Hart: ein zweites Merkmal. Weich: welches. Vorgabe direkte Beschriftung am Ende der Linie.

Woran Du den Verstoß erkennst

• Der aktive Tab unterscheidet sich nur in der Textfarbe.
• Eine ausgewählte Kachel ist nur farblich hervorgehoben.
• In Graustufen ist nicht mehr erkennbar, welches Element an ist. Das ist der schnellste Test.
• Legende nur aus Farbkästchen.
• Zwei Linien, die sich nur im Farbton unterscheiden.
• Kreisdiagramm ohne Beschriftung an den Stücken.
• Benachbarte Reihen unter 3:1 zueinander.

Grenzen

Für kurzzeitige Zustände wie Hover gilt die Regel nicht. Hover ist eine Rückmeldung auf eine Handlung, die gerade passiert, und der Nutzer weiß bereits, wo er ist.

Diagramme mit genau einer Reihe.

Quelle

WCAG 1.4.1 Use of Color, 1.4.11 Non-text Contrast. Vercel › Design („Accessible charts").

Verwandt

• Kurze Zustände verschieben, dauerhafte wechseln die Palette
• Rot ist nicht ein Rot
• Kontrast hat eine Untergrenze
• Eine Bedeutung, überall gleich