Farben & Kontrast: Sichtbarkeit für alle

WCAG definiert Kontrast als Verhältnis zwischen der Leuchtdichte von Vordergrund- und Hintergrundfarbe. Das Verhältnis wird als Zahl angegeben, z.B. 4.5:1. Je höher, desto besser.

1.4.3 Kontrast (Minimum) – Stufe AA: Normaler Text (unter 18pt / unter 14pt fett) benötigt mindestens 4.5:1. Großer Text (ab 18pt oder 14pt fett) benötigt mindestens 3:1.

1.4.6 Kontrast (Erweitert) – Stufe AAA: Normaler Text: 7:1. Großer Text: 4.5:1. Für spezialisierte Angebote sinnvoll, aber nicht für alle Kontexte erreichbar.

1.4.11 Kontrast bei Nicht-Text – Stufe AA (WCAG 2.1): UI-Elemente wie Schaltflächen, Eingabefelder und Icons müssen mindestens 3:1 Kontrast zu angrenzenden Farben haben. Das betrifft Rahmen, Fokusindikatoren und Zustandsmarkierungen.

Menschen mit Sehbehinderungen, Farbenblindheit oder in ungünstigen Lichtverhältnissen sehen Kontraste völlig anders. Ein Kontrast, der auf einem kalibrierten Monitor in einem abgedunkelten Büro "klar und deutlich" wirkt, kann auf einem Smartphone in der Sonne unleserlich sein.

Hinzu kommt: Grau-in-Grau-Kombinationen wirken für Sehende oft angemessen kontrastreich, scheitern aber trotzdem am numerischen Test. Das passiert, weil das menschliche Gehirn Kontraste relativ bewertet und kontextabhängig wahrnimmt – die WCAG-Formel bewertet sie absolut.

Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbenblindheit. Die häufigste Form ist Rot-Grün-Schwäche – aber es gibt auch Blau-Gelb-Schwächen und vollständige Farbblindheit (Achromatopsie), die selten, aber existent ist.

Kontrast allein löst das Problem der Farbenblindheit nicht vollständig. Informationen, die ausschließlich über Farbe vermittelt werden – etwa rote Pflichtfelder ohne Markierung oder grüne/rote Statusanzeigen ohne Icon oder Text – sind ein WCAG-Verstoß (1.4.1 Verwendung von Farbe).

Praxistipp: Wenn eine Information nur durch Farbe kommuniziert wird, immer ein zweites Signal hinzufügen – ein Icon, ein Label oder ein Muster.