WCAG Kontrastprüfer
Überprüfen Sie, ob zwei Farben die WCAG AA- und AAA-Kontrastanforderungen erfüllen.
Kurze Antwort: WCAG-Kontrastprüfer: Prüfen Sie, ob zwei Farben die WCAG-Kontrastanforderungen für AA und AAA erfüllen. Läuft vollständig in Ihrem Browser, kostenlos und ohne Anmeldung.
Zuletzt aktualisiert
Gut zu wissen
Contrast is measured as a ratio between the relative luminance of two colors, running from 1:1 (identical) to 21:1 (pure black on pure white). The WCAG 2.1 thresholds this tool reports are the accessibility bar most sites are held to: 4.5:1 for normal body text and 3:1 for large text at Level AA, tightening to 7:1 and 4.5:1 at the stricter Level AAA. "Large" here means roughly 18pt, or 14pt bold.
The formula is based on perceived luminance, not on how different two colors look, which produces some counterintuitive results. Two vivid but similarly bright colors — say a saturated red on a saturated green — can have poor contrast even though they clash violently to the eye, while a light gray on white may pass more easily than you expect. That is why relying on your own judgment is unreliable and a numeric check is worth the two seconds it takes.
One limitation to plan around: WCAG contrast is only defined for opaque colors. If your foreground uses transparency, the effective color depends on whatever sits behind it, so pre-blend it against the actual solid background before checking. Since luminance ignores hue entirely, a passing ratio does not guarantee a design is color-blind-friendly — confirm that separately with the color blindness simulator, and grab exact values with the color picker.
Häufig gestellte Fragen
- Ist der Kontrast-Checker kostenlos?
- Ja — kostenlos, ohne Anmeldung oder Einschränkungen.
- Welche Formel verwendest du?
- Die offizielle WCAG 2.1 relative Helligkeitsformel — dieselbe, die auch Google’s Lighthouse verwendet.
- Welche Verhältnisse bestehen?
- AA benötigt 4.5:1 für normalen Text oder 3:1 für großen Text; AAA erhöht dies auf 7:1 und 4.5:1.
- Kann ich transparente Farben überprüfen?
- WCAG definiert keine Verhältnisse für transparente Vordergründe — mische deine Farbe zuerst mit einem soliden Hintergrund.
- Werden Daten hochgeladen?
- Nein — die Überprüfung erfolgt in deinem Browser.