Kontrast-Prüfer
Kostenloser Online-Kontrast-Prüfer für WCAG AA und AAA Barrierefreiheit. Text- und Hintergrundfarben eingeben und Kontrastverhältnis sofort prüfen.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
21:1
Contrast Ratio
| WCAG AA | WCAG AAA | |
|---|---|---|
| Normal Text | ||
| Large Text |
So funktioniert es
- Geben Sie die Textfarbe als HEX-Code ein (z. B. #2d2d2d) oder wählen Sie sie mit dem Farbwähler aus.
- Tragen Sie die Hintergrundfarbe auf dieselbe Weise ein.
- Klicken Sie auf die Schaltfläche, um das Kontrastverhältnis sofort zu berechnen.
- Überprüfen Sie, ob das Ergebnis die WCAG-AA- oder AAA-Anforderungen erfüllt.
- Passen Sie die Farben nach Bedarf an, bis das gewünschte Barrierefreiheitsniveau erreicht ist.
Beispiel
Eingabe: Textfarbe: #1a1a1a, Hintergrundfarbe: #fafafa
Ergebnis: Kontrastverhältnis: 18.66:1 — Erfüllt WCAG AA und AAA für normalen und großen Text
FAQ
Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen Vordergrund- und Hintergrundfarbe. Es wird nach der WCAG-Formel berechnet und reicht von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast zwischen Schwarz und Weiß).
Nach WCAG 2.1 AA muss normaler Text ein Kontrastverhältnis von mindestens 4.5:1 aufweisen, großer Text (ab 18pt oder 14pt fett) mindestens 3:1. Für die höchste Stufe AAA gelten 7:1 bzw. 4.5:1.
Nein, alle Berechnungen werden ausschließlich in Ihrem Browser durchgeführt. Es werden keinerlei Daten an einen Server übertragen. Ihre Angaben bleiben vollständig privat und lokal auf Ihrem Gerät.
Ja, das Tool ist sowohl für Einsteiger als auch für professionelle Designer und Entwickler geeignet. Es liefert präzise Ergebnisse gemäß den aktuellen WCAG-Richtlinien und kann in jeden Designprozess integriert werden.
Das Tool zeigt Ihnen klar an, welches Niveau nicht erreicht wurde. Sie können dann die Farben anpassen — entweder durch Aufhellen des Hintergrunds oder Abdunkeln des Textes — bis das gewünschte Verhältnis erreicht ist.