Color Contrast Checker

Teste das Kontrastverhältnis zwischen Vorder- und Hintergrundfarben, um die Barrierefreiheit sicherzustellen.

1.00:1
Kontrast
Fail
Sehr schlecht

Normaler Text

AA (4.5:1)
AAA (7:1)

Großer Text

AA (3:1)
AAA (4.5:1)
White
#ffffff
Black
#b400ff

Schnelle Lösungen

Aa

Vorschautitell

Der schnelle braune Fuchs springt über den faulen Hund

Beispiel für kleinen Text (12px)

Text
#ffffff
Hintergrund
#b400ff

WCAG-Standards

Level AA

Minimales Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Erforderlich für die meisten Websites.

Level AAA

Erweitertes Kontrastverhältnis von 7:1 für normalen Text und 4,5:1 für großen Text. Empfohlen für optimale Barrierefreiheit.

Unzureichender Kontrast für alle Textgrößen - entspricht nicht den WCAG-Standards.

Color Contrast Checker

Berechne das Kontrastverhältnis von Text- und Hintergrundfarben.

Wähle eine Farbe mit dem Color Picker für Text- und Hintergrundfarbe oder gib eine Farbe im RGB-Hexadezimalformat ein (z.B. #259 oder #2596BE). Du kannst den Schieberegler anpassen, um die Farbe auszuwählen. Die Web Content Accessibility Guidelines (WCAG) haben eine spezielle Richtlinie, um herauszufinden, ob Text für sehende Nutzer lesbar ist. Dieses Kriterium verwendet einen bestimmten Algorithmus, um Farbkombinationen in vergleichbare Verhältnisse zu überführen. Mit dieser Formel gibt WCAG an, dass ein Kontrastverhältnis von 4,5:1 zwischen Text und Hintergrund für normalen (Fließ-)Text ausreichend ist, und großer Text (18+ pt normal oder 14+ pt fett) sollte mindestens ein Kontrastverhältnis von 3:1 haben.

Hauptmerkmale

  • Echtzeit-Kontrastverhältnisberechnung
  • WCAG AA & AAA Konformitätsprüfung
  • HSL-Schieberegler zur Feinabstimmung
  • Mehrere Vorschauformate

Erweiterte Werkzeuge

  • Automatische Farbkorrektur
  • Text- und Hintergrundbeispiele
  • Farbnamen-Erkennung
  • Ergebnisse exportieren