Farbkontrast Checker
WCAG-Kontrast zwischen zwei Farben prüfen. Live-Vorschau, AA/AAA-Bewertung für Normaltext, Großtext und UI-Komponenten.
Großtext (24px+, oder 18.66px+ fett)
Normaltext: Der schnelle braune Fuchs springt über den faulen Hund. Wenn dieser Text gut lesbar ist, passt der Kontrast für Fließtext.
WCAG-Bewertung
Großtext: ab 24px (≈18pt) oder 18.66px fett. Alles darunter zählt als Normaltext. UI-Komponenten umfasst Icons, Buttons und Form-Elemente.
So funktioniert das Tool
Der WCAG-2.2-Kontrast zwischen Text und Hintergrund entscheidet darüber, ob Menschen mit Sehschwäche, in hellem Sonnenlicht oder auf billigen Displays deine Inhalte lesen können - und ob deine Seite barrierefrei-konform ist. Unser Checker nimmt zwei Farben (Vordergrund und Hintergrund), rechnet das Kontrastverhältnis nach WCAG-Formel aus und zeigt dir auf einen Blick, welche Stufe du erreichst: AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), AAA Large (4.5:1). Plus eine Live-Vorschau mit echtem Text.
Typische Anwendungsfälle
Brand-Farben gegen das Pflicht-Mindestmaß prüfen
Bevor das Branding finalisiert wird: Primärfarben gegen Weiß und Schwarz testen. Wenn der CTA-Hover-State unter 3:1 fällt, ist das ein BFSG-Risiko ab 28. Juni 2025.
Body-Text-Kontrast feinjustieren
Designer lieben graue Texte. Aber #999 auf #FFF hat nur 2.85:1 - fällt durch jeden WCAG-AA-Test. Hier siehst du, ab welcher Helligkeit du wieder grünes Licht bekommst.
Dark-Mode-Variante validieren
Helle Schrift auf dunklem Grund. Beliebter Anfängerfehler: #888 auf #222 wirkt edel, hat aber 4.36:1 - nur knapp unter AA Normal (4.5:1).
Audit-Vorbereitung
Vor einem Accessibility-Audit eines Kunden alle wiederkehrenden Farbkombinationen durchprüfen - was hier durchfällt, fällt auch in unserem Audit-Tool durch.
FAQ
Häufige Fragen
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.