WCAG Kontrast-Checker Leitfaden: AA/AAA Anforderungen und Fehler beheben
Lernen Sie die WCAG 2.1 Kontrastanforderungen, wie man Kontrastverhältnisse berechnet, häufige Fehler und praktische Lösungen für Text, UI-Komponenten und ganze Farbpaletten.
Farbkontrast ist der häufigste Barrierefreiheitsfehler im Web. Laut der jährlichen Barrierefreiheitsanalyse von WebAIM betrifft niedriger Kontrast über 80% der Startseiten. Dennoch ist es auch eines der am einfachsten zu behebenden Probleme — wenn Sie die Regeln kennen und die richtigen Werkzeuge haben. Dieser Leitfaden erklärt die WCAG-Kontrastanforderungen, wie Kontrastverhältnisse funktionieren und wie man Fehler behebt, ohne die gesamte Palette neu zu gestalten.
Was ist Farbkontrast und warum ist er wichtig?
Farbkontrast ist der Unterschied in der Luminanz (wahrgenommene Helligkeit) zwischen Text und seinem Hintergrund. Hoher Kontrast macht Text für alle lesbar — einschließlich Benutzer mit Sehschwäche, Farbenblindheit oder beim Betrachten von Bildschirmen bei hellem Sonnenlicht.
Die Web Content Accessibility Guidelines (WCAG) 2.1 definieren minimale Kontrastverhältnisse, um Lesbarkeit sicherzustellen. Diese Standards zu erfüllen ist nicht nur gute Praxis — es ist gesetzlich vorgeschrieben unter dem Americans with Disabilities Act (ADA), Section 508 und ähnlichen Gesetzen weltweit.
WCAG Kontrastanforderungen
WCAG definiert zwei Konformitätsstufen für Kontrast:
Stufe AA (Mindeststandard)
Normaler Text (unter 18pt oder unter 14pt fett): Mindestverhältnis 4.5:1
Großer Text (18pt+ oder 14pt+ fett): Mindestverhältnis 3:1
UI-Komponenten und grafische Objekte: Mindestverhältnis 3:1 (WCAG 2.1 Ergänzung)
Stufe AAA (erweiterter Standard)
Normaler Text: 7:1 Minimum
Großer Text: 4.5:1 Minimum
Die meisten Organisationen zielen auf Stufe AA als Basis ab. AAA wird für textlastige Anwendungen und Produkte empfohlen, die Benutzer mit Sehbehinderungen bedienen.
Wie Kontrastverhältnisse berechnet werden
Das Kontrastverhältnis ist die relative Luminanz der helleren Farbe geteilt durch die Luminanz der dunkleren Farbe, ausgedrückt als Verhältnis von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß).
Sie müssen dies nicht manuell berechnen. Verwenden Sie unseren WCAG Kontrast-Checker, um mehrere Farbpaare sofort zu testen.
Beispiele
| Text | Hintergrund | Verhältnis | AA Normal | AA Groß | AAA Normal |
|---|---|---|---|---|---|
#000000 |
#FFFFFF |
21:1 | ✅ Bestanden | ✅ Bestanden | ✅ Bestanden |
#767676 |
#FFFFFF |
4.54:1 | ✅ Bestanden | ✅ Bestanden | ❌ Nicht bestanden |
#3B82F6 |
#FFFFFF |
3.15:1 | ❌ Nicht bestanden | ✅ Bestanden | ❌ Nicht bestanden |
#1E40AF |
#FFFFFF |
7.04:1 | ✅ Bestanden | ✅ Bestanden | ✅ Bestanden |
Häufige Fehler und Lösungen
Hellgrauer Text auf Weiß
Fehler: color: #999999 auf Weiß = 2.85:1 — Besteht AA nicht.
Lösung: Verdunkeln auf #767676 (4.54:1) für AA oder #595959 (7.0:1) für AAA.
Markenfarben auf Weiß
Fehler: color: #3B82F6 (Tailwind blue-500) auf Weiß = 3.15:1 — Besteht AA normaler Text nicht.
Lösung: Nur für großen Text verwenden oder auf #1E40AF (blue-700, 7.04:1) für Fließtext verdunkeln.
Verwenden Sie den Batch-Kontrast-Checker, um Ihre gesamte Palette in Sekunden zu testen.