Kontrast Checker

Kontrastverhältnis zwischen Text und Hintergrund prüfen. WCAG AA/AAA-Konformität, Luminanzberechnung. Farbwähler.

Normaler Textbeispiel – Der schnelle braune Fuchs.

Großer Text (18pt+)

Kontrastverhältnis
Standard Niveau Mindestverhältnis Ergebnis
Normaler TextWCAG AA4.5:1
Großer Text (≥18pt / ≥14pt fett)WCAG AA3:1
Normaler TextWCAG AAA7:1
Großer Text (≥18pt / ≥14pt fett)WCAG AAA4.5:1

So verwenden Sie den Kontrast-Checker

  1. Verwenden Sie die Farbwähler oder geben Sie HEX-Codes für Vordergrund- (Text) und Hintergrundfarbe ein.
  2. Kontrastverhältnis und WCAG-Konformität werden sofort aktualisiert.
  3. Verwenden Sie Tauschen, um Vorder- und Hintergrund zu vertauschen.

WCAG-Kontrastanforderungen

  • AA – Normaler Text: mindestens 4,5:1. Erforderlich für WCAG 2.1 Level AA.
  • AA – Großer Text: mindestens 3:1. Großer Text = 18pt (24px) normal oder 14pt (18,67px) fett.
  • AAA – Normaler Text: mindestens 7:1. Erhöhter Barrierefreiheitsstandard.
  • AAA – Großer Text: mindestens 4,5:1.

Berechnung des Kontrastverhältnisses

Die relative Luminanz (L) wird aus den sRGB-Farbkanälen nach Gamma-Linearisierung berechnet: L = 0,2126R + 0,7152G + 0,0722B. Das Verhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist.