Farbe II: Kontrast, Accessibility & WCAG
Schöne Farben allein reichen nicht — wenn sie niemand lesen kann, sind sie wertlos. Lerne, wie du Farben zugänglich einsetzt und die WCAG-Richtlinien gezielt anwendest.
- Das Contrast Ratio verstehen und selbst berechnen können
- WCAG-Stufen kennen: AA vs. AAA, Normal Text vs. Large Text
- Das Problem von weißem Text auf farbigem Hintergrund erkennen und lösen
- Farbblindheit berücksichtigen — warum Farbe nie der einzige Informationsträger sein darf
- Accessible Design umsetzen, ohne Kompromisse bei der Ästhetik zu machen
Accessibility ist kein Zusatzfeature, sondern Grundvoraussetzung. Wenn ~8% aller Männer eine Farbsehschwäche haben, betrifft es statistisch mindestens einen Teilnehmer in diesem Raum.
Contrast Ratio und WCAG-Anforderungen
Das Contrast Ratio beschreibt das Helligkeitsverhältnis zwischen Vordergrund- und Hintergrundfarbe. Es reicht von 1:1 (kein Kontrast — identische Farben) bis 21:1 (maximaler Kontrast — Schwarz auf Weiß). Die WCAG (Web Content Accessibility Guidelines) definieren Mindestanforderungen für Lesbarkeit.
AA Normal Text — mindestens 4.5:1
Gilt für Text unter ~18px (oder unter 14px bold). Das ist die Mindestanforderung, die du für jeden Fließtext in deiner UI einhalten solltest — ohne Ausnahme.
AA Large Text — mindestens 3:1
Gilt für Text ab ~18px (oder ab 14px bold). Große Headlines dürfen etwas weniger Kontrast haben, weil sie durch ihre Größe bereits gut lesbar sind.
AAA — mindestens 7:1 (Normal) / 4.5:1 (Large)
Die strengste Stufe. Ideal für lange Lesetexte und medizinische/rechtliche Inhalte. Für UI-Elemente wie Buttons ist AA in der Regel ausreichend.
UI-Komponenten & Grafiken — mindestens 3:1
Icons, Borders, Formularfelder und andere nicht-textliche Elemente brauchen mindestens 3:1 Kontrast zum Hintergrund (WCAG 1.4.11). Oft vergessen, aber genauso wichtig.
Contrast Checker — Live testen
Wähle Vordergrund- und Hintergrundfarbe und sieh sofort, ob die Kombination die WCAG-Anforderungen erfüllt. Experimentiere: Wie dunkel muss ein Teal-Hintergrund sein, damit weißer Text darauf AA besteht?
Kontrast umdrehen statt verdunkeln
Weißer Text auf farbigem Hintergrund braucht oft einen überraschend dunklen Hintergrund, um 4.5:1 zu erreichen. Das kann zum Problem werden, wenn diese Elemente nicht das Hauptelement der Seite sein sollen — dunkle Flächen ziehen starke Aufmerksamkeit auf sich.
3.0:1 ✗
3.9:1 ✗
2.5:1 ✗
5.2:1 ✓
7.8:1 ✓
6.3:1 ✓
Der „Flip"-Trick: Statt den Hintergrund dunkler zu machen (was das Element visuell dominant macht), drehst du den Kontrast um. Dunkler Text auf hellem Hintergrund erreicht oft mühelos 5:1+ und wirkt gleichzeitig subtiler im Gesamtlayout. Die Farbe unterstützt den Text, ohne das Layout zu dominieren.
Wenn weißer Text auf farbigem Hintergrund nicht genug Kontrast hat, drehe den Kontrast um: dunkler Text (Shade 700–900) auf hellem Hintergrund (Shade 50–100).
Kein Grau auf farbigen Hintergründen
De-Emphasis durch hellgrauen Text funktioniert hervorragend auf weißem Hintergrund. Auf farbigen Hintergründen sieht es aber ausgewaschen und unscharf aus. Der Grund: Du reduzierst nicht den Kontrast, sondern fügst eine fremde Farbe hinzu.
Links wird grauer Text (#a0a0a0) auf blauem Hintergrund verwendet. Das Grau hat keinen Bezug zum Hintergrund — es wirkt wie ein Fremdkörper. Rechts wird ein heller Blauton gewählt, der den gleichen Hue wie der Hintergrund hat, nur mit höherer Lightness. Das Ergebnis: harmonisch, lesbar und visuell zusammengehörig.
Verwende auf farbigen Hintergründen nie Grautöne für sekundären Text. Wähle stattdessen eine hellere Variante der Hintergrundfarbe — gleicher Hue, höhere Lightness.
Accessibility-Audit einer Karte
Die folgende Profilkarte hat mehrere Accessibility-Probleme: mangelnder Kontrast, Farbe als einziger Informationsträger und grauen Text auf farbigem Hintergrund. Deine Aufgabe: Finde und behebe alle Probleme, ohne das grundlegende Design zu verändern.