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.
Häufige Fragen
Welche WCAG-Version wird zugrunde gelegt?
WCAG 2.2 (Stand: Oktober 2023). Die Kontrast-Formel hat sich seit WCAG 2.0 nicht geändert: (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere und L2 die dunklere relative Luminanz ist. WCAG 3 (Entwurf) wird einen neuen Algorithmus namens APCA bringen — der ist hier noch nicht implementiert.
Was zählt als „Large Text”?
Ab 18 Punkt (24 px) normal oder 14 Punkt (18.66 px) Bold. Für Large Text reicht 3:1 (AA) bzw. 4.5:1 (AAA), für Body unter dieser Schwelle musst du 4.5:1 (AA) bzw. 7:1 (AAA) erreichen.
Gibt es Ausnahmen vom Kontrast-Pflicht?
Inaktive UI-Elemente, rein dekorative Texte, Logos und Markenzeichen sind ausgenommen. Aber: ein „Submit”-Button im Disabled-Zustand muss trotzdem erkennbar bleiben — meist über separate Indikatoren (Cursor, Opacity, Icon), nicht über reduzierten Kontrast.
Wie behandle ich Text auf Bildern?
Wenn du Text über ein Foto legst, gibt es selten EIN Pixel im Hintergrund — du musst gegen die durchschnittliche Helligkeit der Bereiche unter dem Text testen. Praxis: schwarzes oder dunkelgraues Overlay mit 40-60 % Opacity, dann fester Foreground-Color. Den getesten Background hier mit der dominanten Farbe nach Overlay simulieren.
Was ist das Bundesfachgesetz BFSG und was hat es damit zu tun?
Das Barrierefreiheitsstärkungsgesetz tritt am 28. Juni 2025 in Kraft und macht WCAG-AA-Konformität für viele B2C-Websites in Deutschland zur Pflicht. Verstöße können abgemahnt und mit Bußgeldern bis 100.000 € belegt werden. Kontrast ist eine der häufigsten Audit-Findings.
Verwandte Tools
Alle Daten bleiben in deinem Browser. Kein Server, kein Tracking.