Kontrast‑Checker nach WCAG 2.1
Text- und Hintergrundfarbe eingeben — Kontrastverhältnis und alle WCAG-Grenzwerte sofort sehen. Kostenlos, ohne Anmeldung, direkt im Browser.
Große Überschrift als Vorschau
So sieht normaler Fließtext in Ihrer Farbkombination aus. Können alle ihn lesen?
Die WCAG-Grenzwerte im Detail
| Anforderung | Kontrast | Gilt für |
|---|---|---|
| WCAG 1.4.3 (AA) — Fließtext | 4,5:1 | Normalen Text bis ca. 24 px (bzw. 18,7 px fett) |
| WCAG 1.4.3 (AA) — große Schrift | 3:1 | Text ab 24 px oder ab 18,7 px fett |
| WCAG 1.4.11 (AA) — Grafiken/Bedienelemente | 3:1 | Icons, Rahmen von Eingabefeldern, Fokus-Indikatoren, Diagramm-Elemente |
| WCAG 1.4.6 (AAA) | 7:1 | Erhöhte Anforderung, gesetzlich nicht gefordert, aber empfehlenswert für Fließtext |
Wie wird das Kontrastverhältnis berechnet?
Die WCAG definieren das Kontrastverhältnis über die relative Luminanz
beider Farben: (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und
L2 die dunklere Farbe ist. Die Skala reicht von 1:1 (identische Farben) bis 21:1
(Schwarz auf Weiß). Genau diese Formel verwendet unser Checker — und übrigens auch
die Kontrastprüfung in unserem Prüfwerkzeug, die Ihre
kompletten Stylesheets analysiert.
Typische Kontrast-Fallen
- Grau auf Weiß: #999999 schafft nur 2,85:1 — erst ab #767676 sind es 4,5:1.
- Weiß auf Markenfarben: Viele Corporate-Blau- und Grüntöne sind zu hell für weiße Schrift.
- Text auf Bildern: Der Kontrast schwankt mit dem Bild — Overlay oder Textplakette einplanen.
- Platzhalter-Text: Standard-Grau vieler Browser liegt unter 4,5:1.
- Hover-Zustände: Auch der Hover-/Fokus-Zustand muss die Grenzwerte einhalten.
Kontrast ist nur ein Prüfschritt von ~100
Der Kontrast-Check deckt die Prüfschritte 9.1.4.3 und 9.1.4.11 ab — die vollständige Barrierefreiheits-Prüfung nach BITV / EN 301 549 umfasst rund 100 Prüfschritte.