WCAG-Kontrastprüfer
Testen Sie jedes Vordergrund- und Hintergrundfarbpaar auf das WCAG 2.1-Kontrastverhältnis (1 bis 21). Siehe „Bestanden/Nicht bestanden“ für Level AA und AAA, für normalen Text, großen Text (18pt+ oder 14pt fett) und UI-Komponenten.
So überprüfen Sie den Farbkontrast
1. Gib Vordergrund- (Text) und Hintergrundfarben ein oder wählen Sie sie aus.
2. Lies das Kontrastverhältnis ab (z. B. 4,52:1).
3. Prüfe die AA- und AAA-Zeilen auf normale und große Textgrößen.
4. Passe die HSL-Helligkeit an, bis das erforderliche Niveau erreicht ist, und kopieren Sie dann die Hex-Werte.
Beispiele für Kontrastprüfungen
Textkörper #374151 auf #FFFFFF
Verhältnis ≈ 8,9:1 — erfüllt AAA für normalen Text (benötigt 7:1). Angenehmes Lesen in Langform.
Hellgrau #9CA3AF auf Weiß
Verhältnis ≈ 2,6:1 — AA schlägt für normalen Text fehl (benötigt 4,5:1). Häufiger Platzhalterfehler.
Primärtaste weiß auf #2563EB
Verhältnis ≈ 4,6:1 — übergibt normalen AA-Text; Wechseln Sie zu einem dunkleren Blau für AAA- oder Large-Only-Anwendungen.
Wann sich dieses Tool lohnt
• Wenn du Design-System-Tokens vor der Veröffentlichung prüfen.
• Wenn du Barrierefreiheitsbefunde von Lighthouse oder Axe beheben.
• Wenn du Linkfarben auswählen, müssen diese sich vom Textkörper unterscheiden, nicht nur durch den Farbton.
WCAG 2.1-Stufen erklärt
Level A ist mindestens; AA ist in vielen Gerichtsbarkeiten (ADA, EAA öffentlicher Sektor) das rechtliche Ziel. AAA strebt nach Fließtexten — große Schlagzeilen können AAA leichter bestehen als 14-Pixel-Untertitel. Sichtbare Fokusindikatoren (2.4.7) ergänzen den Kontrast — Tastaturbenutzer benötigen sichtbare Fokusringe, oft 3:1 gegenüber benachbarten Farben. Dokumentieren Sie „Bestanden/Nicht bestanden“ in deinem Designsystem neben jedem Token-Paar.
Häufige Fragen
Welches Kontrastverhältnis für normalen WCAG AA-Text?
Mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt fett).
Was für AAA?
7:1 normaler Text, 4,5:1 großer Text — strenger, wird oft für Regierungsseiten verwendet.
Brauchen UI-Komponenten Kontrast?
WCAG 2.1 erfordert 3:1 für grafische Objekte und UI-Komponentengrenzen (1.4.11).
Wie wird das Verhältnis berechnet?
Basierend auf der relativen Leuchtdichte der sRGB-Farben: (L1 + 0,05) / (L2 + 0,05), wobei L1 heller ist.
Behebt die Unterstreichung kontrastarme Links?
Nein — Kontrast ist weiterhin erforderlich. Unterstreichungen unterstützen nicht farbliche Hinweise, ersetzen jedoch keine Verhältnisregeln.