Kontrastprüfer
Prüfe Kombinationen aus Text- und Hintergrundfarbe auf WCAG-Barrierefreiheit.
Kontrastverhältnis
12.63:1
So funktioniert der Kontrastprüfer
Prüfe jedes Paar aus Text- und Hintergrundfarbe auf WCAG-Konformität – AA und AAA, mit Live-Vorschau.
WCAG AA & AAA
Prüfe deine Farbpaare gegen beide Konformitätsstufen von WCAG 2.1. AA verlangt 4,5:1 für normalen und 3:1 für großen Text. AAA legt die Latte auf 7:1 bzw. 4,5:1.
Normaler & großer Text
Das Tool bewertet den Kontrast getrennt für normalen Text (unter 18px) und großen Text (18px fett oder 24px normal), denn großer Text ist auch bei geringerem Kontrast lesbar.
Live-Vorschau
Sieh in Echtzeit, wie deine Kombination aus Text und Hintergrund aussieht. Die Vorschau aktualisiert sich sofort, wenn du Farben änderst, und zeigt eine realistische Darstellung.
Intelligente Vorschläge
Fällt eine Kombination durch, schlägt das Tool die nächstgelegene Farbe vor, die besteht. So passt du nur so viel an wie nötig, um die Standards für Barrierefreiheit zu erfüllen.
Häufig gestellte Fragen
Für WCAG AA (die häufigste gesetzliche Anforderung) braucht normaler Text ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund. Großem Text (18px fett oder 24px normal) reichen 3:1. Die erweiterte Stufe WCAG AAA verlangt 7:1 bzw. 4,5:1.
In vielen Ländern ja. Die EU-Richtlinie über den barrierefreien Zugang zu Websites, der US-amerikanische ADA und ähnliche Gesetze in Kanada, Australien und Großbritannien verlangen, dass öffentliche und kommerzielle Websites WCAG 2.1 AA erfüllen. Auch ohne gesetzliche Pflicht macht Barrierefreiheit eine Website für alle besser nutzbar.
Das Verhältnis beruht auf der relativen Luminanz zweier Farben, wie sie die WCAG-2.1-Spezifikation definiert. Es reicht von 1:1 (kein Kontrast, dieselbe Farbe) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß). Die Formel berücksichtigt, dass das menschliche Auge Helligkeit in verschiedenen Bereichen des Farbspektrums unterschiedlich wahrnimmt.
Ja. WCAG 2.1 verlangt für UI-Komponenten und grafische Objekte – Buttons, Formularrahmen, Icons und Diagrammelemente – ein Kontrastverhältnis von mindestens 3:1. So bleiben interaktive Elemente auch für Menschen mit Sehschwäche erkennbar.