Developer

Farbkontrast.

Prüft, ob Vorder- und Hintergrundfarbe gut lesbar zusammenpassen.

Beispieltext für Kontrast

Wozu dient der Farbkontrast Checker?

Der Farbkontrast Checker prüft, ob zwei Farben genug Kontrast für gute Lesbarkeit bieten. Du wählst eine Vordergrund- und eine Hintergrundfarbe, das Tool berechnet das Kontrastverhältnis nach den WCAG-Richtlinien und zeigt mit einem Badge an, ob die Stufen AA und AAA erfüllt sind. So gestaltest du Texte, Buttons und Hinweise barrierefrei.

Ausreichender Kontrast hilft allen Nutzern, besonders bei Sehschwächen, schlechtem Display oder hellem Umgebungslicht. Der Checker gibt dir eine klare Empfehlung, ob die Kombination für normalen oder großen Text geeignet ist. Die Berechnung läuft vollständig in deinem Browser, es werden keine Daten an einen Server gesendet.

Beispiele

  • Schwarz auf Weiß erreicht das maximale Kontrastverhältnis von 21:1 und besteht AA und AAA.
  • Für normalen Text verlangt WCAG AA mindestens 4,5:1, für großen Text genügen 3:1.
  • Die strenge Stufe AAA fordert 7:1 bei normalem und 4,5:1 bei großem Text.
  • Ein helles Grau auf Weiß mit nur 2:1 fällt durch und sollte abgedunkelt werden.

Häufige Fragen zum Farbkontrast Checker

Was bedeutet das Kontrastverhältnis?

Es beschreibt den Helligkeitsunterschied zwischen Text und Hintergrund, von 1:1 bei gleicher Farbe bis 21:1 bei Schwarz auf Weiß. Je höher der Wert, desto besser die Lesbarkeit.

Was ist der Unterschied zwischen AA und AAA?

AA ist die übliche Mindestanforderung mit 4,5:1 für normalen Text, AAA ist strenger und verlangt 7:1. Für großen Text gelten jeweils niedrigere Schwellen.

Was zählt als großer Text?

Als groß gilt nach WCAG Text ab etwa 18 Punkt oder ab 14 Punkt fett. Für solchen Text sind geringere Kontrastwerte ausreichend.

Werden meine Farbwerte gespeichert?

Nein, die Berechnung läuft komplett in deinem Browser. Es werden keine Daten gesendet oder gespeichert.

Ist der Farbkontrast Checker kostenlos?

Ja, das Tool ist kostenlos und ohne Anmeldung nutzbar.