Wie Sie den Farbkontrast für Barrierefreiheit prüfen
Etwa 1 von 12 Männern und 1 von 200 Frauen haben eine Form von Farbenfehlsichtigkeit. Millionen weitere haben eingeschränktes Sehvermögen, alternde Augen oder schauen auf Bildschirme bei grellem Sonnenlicht. Wenn Ihr Text nicht genug Kontrast zum Hintergrund hat, können diese Menschen ihn nicht lesen.
Farbkontrast ist nicht nur ein „Nice-to-have" — er ist eine grundlegende Anforderung an Barrierefreiheit.
Was die WCAG verlangen
Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastverhältnisse zwischen Text und Hintergrund:
| Stufe | Normaler Text | Großer Text | Nicht-textliche UI |
|---|---|---|---|
| AA (Mindestmaß) | 4,5 : 1 | 3 : 1 | 3 : 1 |
| AAA (verstärkt) | 7 : 1 | 4,5 : 1 | — |
„Großer Text" bedeutet ab 18 px fett oder ab 24 px regulär.
Das Kontrastverhältnis reicht von 1 : 1 (kein Kontrast — Weiß auf Weiß) bis 21 : 1 (maximaler Kontrast — Schwarz auf Weiß).
So prüfen Sie den Kontrast
- Farben wählen — geben Sie Vordergrundfarbe (Text) und Hintergrundfarbe per HEX-Code, RGB-Werten oder Farbwählern ein.
- Ergebnisse prüfen — das Tool zeigt sofort das Kontrastverhältnis und ob Ihre Kombination WCAG AA und AAA für normalen und großen Text besteht.
- Bei Bedarf anpassen — wenn der Kontrast nicht reicht, machen Sie den Text dunkler oder den Hintergrund heller (oder umgekehrt), bis Sie das geforderte Niveau erreichen.
Häufige Kontrastfehler
Hellgrauer Text auf Weiß — #999999 auf #ffffff hat ein Verhältnis von nur 2,8 : 1. Das schafft WCAG AA nicht. Es mag einem Designer mit perfekter Sehkraft „aufgeräumt" erscheinen, ist aber für viele Menschen unleserlich.
Farbiger Text auf farbigem Hintergrund — eine blaue Schaltfläche mit weißem Text besteht oft, eine grüne Schaltfläche mit weißem Text womöglich nicht. Prüfen Sie immer — Kontrastverhältnisse lassen sich nicht mit dem Auge beurteilen.
Platzhaltertext — Platzhalter in Formularfeldern haben notorisch zu wenig Kontrast. Auch wenn die WCAG dies nicht streng vorschreibt, müssen Nutzer sie trotzdem lesen können.
Dunkelmodus — Designer verwenden oft mittelgrauen Text auf dunkelgrauem Hintergrund für einen „dezenten" Look. Das scheitert häufig an Kontrastprüfungen.
Tipps
- Jede Text-/Hintergrund-Kombination prüfen — nehmen Sie nichts an. Auch erfahrene Designer sind überrascht, welche Kombinationen scheitern.
- Beide Themes testen — wenn Ihre Site einen Hell- und einen Dunkelmodus hat, prüfen Sie den Kontrast in beiden. Eine Farbe, die auf Weiß funktioniert, kann auf Dunkelgrau scheitern.
- Markenfarben mit Bedacht einsetzen — wenn Ihr Markenblau als Textfarbe scheitert, nutzen Sie es für größere Elemente (Schaltflächen, Überschriften), wo der Schwellwert für großen Text (3 : 1) gilt, und verwenden Sie eine dunklere Nuance für Fließtext.
- Sich nicht allein auf Farbe verlassen — vermitteln Sie zusätzlich zu ausreichendem Kontrast Informationen niemals allein über Farbe. Nutzen Sie Symbole, Textbeschriftungen oder Muster, damit alle den Inhalt verstehen.
Häufig gestellte Fragen
Welches Kontrastverhältnis sollte ich anstreben?
Für normalen Text streben Sie mindestens 4,5:1 an (WCAG AA). Für großen Text (18 px fett oder 24 px regulär) reichen 3:1. Für den höchsten Barrierefreiheits-Standard (AAA) zielen Sie auf 7:1 für normalen Text.
Gilt das nur für Text?
Nein. WCAG 2.1 verlangt auch ausreichenden Kontrast für UI-Komponenten und grafische Objekte (Icons, Formularränder, Fokus-Indikatoren). Das Minimum für nicht-textuelle Elemente ist 3:1.
Was ist mit dem Dark Mode?
Der Dark Mode benötigt dieselben Kontrastprüfungen. Weißer Text auf dunklem Hintergrund besteht oft leicht, aber grauer Text auf dunkelgrauem Hintergrund scheitert häufig. Testen Sie beide Modi.
Ist Farbkontrast eine gesetzliche Anforderung?
In vielen Rechtsordnungen ja. Der ADA (USA), EN 301 549 (EU) und ähnliche Gesetze verlangen digitale Barrierefreiheit. WCAG-Konformität ist der anerkannte Standard, um diese Anforderungen zu erfüllen.