KolorPal

Kontrast-Checker

Stelle sicher, dass deine Designs barrierefrei sind – mit diesem kostenlosen WCAG-2.1-Kontrast-Checker. Gib eine beliebige Kombination aus Text- und Hintergrundfarbe ein und sieh sofort das Kontrastverhältnis und ob es AA oder AAA für normalen und großen Text erfüllt.

Preview Text

The quick brown fox jumps over the lazy dog

Small text sample for accessibility testing

Contrast Ratio

4.60:1

AA Normal

Pass

AAA Normal

Fail

AA Large

Pass

AAA Large

Pass

Jedes Text-Hintergrund-Paar gegen WCAG 2.1 prüfen

Der Kontrast-Checker berechnet das Leuchtdichte-Kontrastverhältnis zwischen einer Vordergrund- und einer Hintergrundfarbe und zeigt dir, ob das Paar WCAG 2.1 auf den Stufen AA und AAA besteht – für normalen und großen Text. Das Verhältnis nutzt dieselbe Formel für die relative Leuchtdichte, die das W3C definiert, sodass die Zahl hier mit dem übereinstimmt, was automatisierte Accessibility-Audits melden. Kein Upload, kein Konto; das Ergebnis aktualisiert sich beim Tippen.

So funktioniert es

  1. Gib Textfarbe und Hintergrundfarbe als Hex-Codes ein oder nutze die Farbwähler.
  2. Lies das Verhältnis ab, angezeigt als n:1. 21:1 ist Schwarz auf Weiß; 1:1 ist gar kein Kontrast.
  3. Prüfe die vier Badges: AA Normal (4,5:1), AAA Normal (7:1), AA Groß (3:1) und AAA Groß (4,5:1).
  4. Passe die hellere Farbe an, bis jedes benötigte Badge grün ist, und kopiere die Hex-Codes dann in dein Design.

Was gilt als großer Text?

Die WCAG definieren großen Text als mindestens 18pt (24px) in normaler Schriftstärke oder 14pt (etwa 18,66px) fett. Alles Kleinere ist normaler Text und braucht das höhere Verhältnis. Icons, Rahmen und Formularumrandungen sind Nicht-Text-Inhalte und brauchen nach Erfolgskriterium 1.4.11 mindestens 3:1.

Beispiele

Tipps

Frequently Asked Questions

Was ist das WCAG-AA-Kontrastverhältnis?▾

WCAG AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (14pt ≈ 18,66px fett oder 18pt = 24px normal). Das sichert die Lesbarkeit für Menschen mit moderaten Sehbeeinträchtigungen.

Was ist der Unterschied zwischen WCAG AA und AAA?▾

WCAG AAA ist strenger – es verlangt 7:1 für normalen Text und 4,5:1 für großen Text. AAA bietet bessere Lesbarkeit, ist mit farbigen Designs aber schwerer zu erreichen. AA ist die Standardanforderung.

Wie prüfe ich den Farbkontrast auf Barrierefreiheit?▾

Gib oben deine Textfarbe und Hintergrundfarbe ein. Das Tool berechnet sofort das Kontrastverhältnis und zeigt, ob es WCAG AA und AAA für normalen und großen Text besteht.

Welches Kontrastverhältnis brauchen UI-Komponenten?▾

Nicht-Text-UI-Komponenten (Icons, Rahmen, Formularfelder) brauchen nach WCAG 2.1 Erfolgskriterium 1.4.11 ein Kontrastverhältnis von mindestens 3:1 zu ihrem Hintergrund.