Kontrastprüfung

Dieser Kontrast-Checker prüft, ob die Farbkombination aus Textfarbe und Hintergrundfarbe den Anforderungen der Web Content Accessibility Guidelines (WCAG) entspricht.
Er zeigt an, ob die Kombination für normale Texte, große Texte und nicht-textuelle Elemente gut lesbar ist.

Ein guter Farbkontrast sorgt dafür, dass Inhalte für alle Menschen gut lesbar sind – insbesondere für:
– Menschen mit Sehschwäche
– Menschen mit Farbenblindheit
– Nutzer bei starker Sonneneinstrahlung oder schlechten Displays
Ausreichender Kontrast ist außerdem gesetzlich vorgeschrieben (z. B. nach WCAG 2.x, EN 301 549).

– AA ist der empfohlene Mindeststandard für barrierefreie Websites.
– AAA ist ein höherer, optionaler Standard für besonders gute Lesbarkeit.
In vielen Ländern und Projekten ist WCAG AA der relevante Zielwert.

Großer oder fetter Text ist leichter zu lesen.
Daher erlaubt WCAG hier geringere Kontrastwerte, ohne die Lesbarkeit zu gefährden.

Nach WCAG gilt Text als „groß“, wenn er:
mindestens 18 pt (≈ 24 px) groß ist oder
14 pt (≈ 18,5 px) groß und fett ist

Nicht-textuelle Elemente sind zum Beispiel:
– Icons
– Buttons ohne Text
– Grafische Symbole
– UI-Elemente mit Bedeutung

Für nicht-textuelle Elemente fordert WCAG einen Mindestkontrast von 3:1, damit ihre Funktion erkennbar bleibt.

Ja.
Du kannst Farben entweder:
über den Farbwähler auswählen oder
direkt als HEX-Wert eingeben (z. B. #1a1a1a).
Beide Eingaben bleiben automatisch synchron.

Der Button tauscht Textfarbe und Hintergrundfarbe.
So kannst du schnell prüfen, ob beide Varianten den WCAG-Anforderungen entsprechen.

Der Checker arbeitet live.
Jede Farbänderung wird sofort berechnet, damit du direkt siehst, ob der Kontrast ausreichend ist.

Nein.
Der Kontrast-Checker ist ein Hilfsmittel, um Farbkontraste zu bewerten.
Eine vollständige Barrierefreiheits-Prüfung umfasst weitere Aspekte wie:
Tastaturbedienung
Screenreader-Kompatibilität
Fokusführung
Struktur & Semantik

Die Berechnung basiert auf den WCAG 2.x Kontrast-Regeln, die auch in aktuellen gesetzlichen Vorgaben verwendet werden (z. B. EN 301 549).

Das Tool eignet sich für:
Web-Designer & Entwickler
Redakteure & Content-Manager
Agenturen
Unternehmen mit Barrierefreiheits-Pflichten
alle, die bessere Lesbarkeit sicherstellen möchten

Verwende dunkleren Text auf hellem Hintergrund (oder umgekehrt)
Erhöhe die Helligkeitsdifferenz
Nutze größere oder fettere Schrift
Vermeide ähnliche Grautöne

Nicht unbedingt.
Sehr starke Kontraste können ermüden.
Ziel ist ein ausreichender, nicht maximaler Kontrast.