Kostenloses Tool

Kontrast-Checker

WCAG-Farbkontrast zwischen Text- und Hintergrundfarbe prüfen

Keine Daten werden gespeichert
RGB:
RGB:
Vorschau
Großer Text (18pt+)
Dies ist ein Beispieltext in normaler Größe. So sieht der Kontrast zwischen Ihrer gewählten Textfarbe und Hintergrundfarbe in der Praxis aus.
Kleiner Text – 12px – Barrierefreiheit ist wichtig für alle Nutzer
12.69 : 1
Kontrastverhältnis
1:1 3:1 4.5:1 7:1 21:1
PASS
WCAG AA – Normaler Text
Text unter 18pt / 14pt fett
Minimum: 4.5 : 1
PASS
WCAG AA – Großer Text
Text ab 18pt / 14pt fett
Minimum: 3 : 1
PASS
WCAG AAA – Normaler Text
Höchste Stufe der Barrierefreiheit
Minimum: 7 : 1
PASS
WCAG AAA – Großer Text
Höchste Stufe für großen Text
Minimum: 4.5 : 1

Was macht dieses Tool?

Der Kontrast-Checker prüft das Kontrastverhältnis zwischen Text- und Hintergrundfarbe nach den WCAG 2.1 Richtlinien. Du siehst sofort, ob deine Farbkombination die Anforderungen für Barrierefreiheit erfüllt – getrennt nach normalem und großem Text, sowie nach AA- und AAA-Stufe.

Wofür brauchst du das?

  • Barrierefreiheit deiner Website sicherstellen – damit alle Menschen deine Inhalte lesen können
  • WCAG AA und AAA Konformität prüfen – wichtig für gesetzliche Anforderungen (z. B. European Accessibility Act)
  • Lesbarkeit verbessern – auch für Nutzer mit Sehschwäche oder bei schlechten Lichtverhältnissen

Vorteile

  • 100 % lokal: Deine Daten bleiben in deinem Browser – nichts wird hochgeladen
  • Kostenlos: Keine Registrierung, kein Account, keine versteckten Kosten
  • Automatische Farbvorschläge: Wenn der Kontrast zu niedrig ist, schlägt das Tool passende Alternativen vor

Was ist der WCAG-Farbkontrast?

Die Web Content Accessibility Guidelines (WCAG) definieren Mindestanforderungen an den Farbkontrast, damit Texte für alle Menschen – einschließlich Personen mit Sehbehinderungen – lesbar sind. Das Kontrastverhältnis wird als Wert zwischen 1:1 (kein Kontrast) und 21:1 (maximaler Kontrast, Schwarz auf Weiß) angegeben.

WCAG-Konformitätsstufen

Stufe Normaler Text Großer Text
AA (Minimum) 4.5 : 1 3 : 1
AAA (Erweitert) 7 : 1 4.5 : 1

Was gilt als „großer Text“?

  • Normaler Text ab 18pt (24px)
  • Fetter Text ab 14pt (ca. 18.66px)

Warum ist Farbkontrast wichtig?

Guter Farbkontrast verbessert die Lesbarkeit für alle Nutzer, ist aber besonders wichtig für Menschen mit Farbenblindheit, Sehschwäche oder in Situationen mit schlechten Lichtverhältnissen. In der EU ist Barrierefreiheit im Web seit dem Europäischen Barrierefreiheitsgesetz (European Accessibility Act) zunehmend gesetzlich vorgeschrieben.