Farben & Kontraste

Farben, Kontraste und Wahrnehmbarkeit

Begriffe vorab

• Kontrastverhältnis: Verhältnis der Helligkeiten von Vorder- und Hintergrundfarbe, von 1:1 (kein Kontrast) bis 21:1.
• Großer Text: nach WCAG ab etwa 18 pt bzw. 14 pt fett.
• Nicht-Text-Kontrast: Mindestkontrast für Bedienelemente und wichtige Grafiken (3:1).

Von angeborener Rot-Grün-Sehschwäche sind in Bevölkerungen nordeuropäischer Herkunft bis zu etwa 8 % der Männer und 0,5 % der Frauen betroffen; in anderen Bevölkerungen sind die Anteile geringer. Kontrast und Farbgestaltung betreffen aber auch Sehbehinderungen allgemein und die Nutzung bei grellem Licht.

Kontrastanforderungen nach WCAG 1.4.3 und 1.4.6

• AA, normaler Text: mindestens 4,5:1 Kontrastverhältnis zum Hintergrund.
• AA, großer Text (ab ca. 18pt bzw. 14pt fett): mindestens 3:1.
• AAA, normaler Text: mindestens 7:1; AAA, großer Text: mindestens 4,5:1.

Reiner Dekor-Text und rein dekorative Bilder sind von der Kontrastanforderung ausgenommen.

Farbe niemals als einziges Merkmal (WCAG 1.4.1)

Ein Pflichtfeld nur rot zu umrahmen oder einen Link nur farblich (ohne Unterstreichung oder anderes Merkmal) vom Fließtext abzuheben, schließt Menschen mit Farbfehlsichtigkeit aus. Zusätzliche Merkmale wie Symbole, Text („* Pflichtfeld“) oder Unterstreichung sind nötig.

Kontrast praktisch prüfen

Werkzeuge wie der WebAIM Contrast Checker oder die Kontrastprüfung in Browser-Entwicklertools berechnen aus zwei Farbwerten automatisch das Kontrastverhältnis und zeigen, welche WCAG-Stufe erreicht wird.

Weitere Wahrnehmbarkeits-Kriterien

• 1.4.4 Textgröße ändern: Text muss sich bis 200 % vergrößern lassen, ohne Inhalt oder Funktion zu verlieren.
• 1.4.10 Reflow: Inhalte müssen bis 400 % Zoom ohne horizontales Scrollen lesbar bleiben (mit definierten Ausnahmen wie Tabellen und Karten).
• 1.4.12 Textabstand: Nutzende dürfen Zeilenhöhe und Buchstabenabstand selbst vergrößern können, ohne dass Inhalte abgeschnitten werden.

Farbkontrast wird oft erst spät im Projekt geprüft, wenn das Designsystem schon feststeht. Kontraste gehören in die Farbpalette selbst, nicht nur in eine spätere Korrekturschleife.

Ein Beispiel: Grau auf Weiß

Ein mittleres Grau wie #999999 auf Weiß erreicht nur etwa 2,8:1 und besteht WCAG AA für normalen Text nicht. Ein dunkleres Grau wie #767676 erreicht gerade 4,5:1. Der Unterschied ist für viele Menschen mit normaler Sicht kaum auffällig, für Menschen mit Sehbehinderung oder bei Sonnenlicht aber entscheidend.

Auch Bedienelemente brauchen Kontrast

WCAG 2.1 verlangt zusätzlich mindestens 3:1 für Ränder von Eingabefeldern, Symbole und Zustände wie „ausgewählt“. Ein hellgrauer Feldrand auf weißem Grund kann das Formular unsichtbar machen.

Ein Ablauf für Designsysteme

1. Kontrast bereits beim Festlegen der Farbpalette prüfen.
2. Erlaubte Kombinationen dokumentieren (Text auf Hintergrund).
3. Helle und dunkle Darstellung getrennt prüfen.
4. Zustände wie Hover, Fokus und deaktiviert mitprüfen.

Zum Selbermachen: Kontraste prüfen

1. Wähle fünf Farbkombinationen deiner Website (Fließtext, Links, Buttons, Platzhalter, Fehlermeldung).
2. Prüfe sie mit einem Kontrastrechner.
3. Notiere, welche unter 4,5:1 (Text) bzw. 3:1 (Bedienelemente) liegen.
4. Passe die Palette an und teste in hellem und dunklem Modus erneut.

Prüfstatus: Belegt (Stand 1. Oktober 2026): Jahreszahlen, Zahlen, Namen und Quellenangaben dieser Lektion, soweit die Quellenliste sie nennt, wurden gegen Primärquellen geprüft. Nicht einzeln belegt: erklärende Darstellung nach Lehrbuchstand und Quellen, die in der Liste als „allgemeine Referenz“ markiert sind. Die Kontrastwerte der Beispiele (#999999 ≈ 2,85:1, #767676 ≈ 4,54:1 auf Weiß) habe ich nachgerechnet.

Quellen

• WCAG 2.2 – Erfolgskriterien 1.4.1, 1.4.3, 1.4.4, 1.4.6, 1.4.10, 1.4.12
• WebAIM – „Contrast Checker“ und „Visual Disabilities: Color Blindness“ (allgemeine Referenz, nicht Zeile für Zeile geprüft)