Farben auswählen
Wähle zuerst deine gewünschte Textfarbe und Hintergrundfarbe. Du kannst dafür den Farbwähler oder direkt einen HEX-Code verwenden.
WCAG Kontrast-Checker
ACCESSIBILITY TOOL
Kontrast prüfen. Lesbarkeit verbessern.
Prüfe Text- und Hintergrundfarben auf ausreichenden Kontrast. Der Checker berechnet das Kontrastverhältnis automatisch und zeigt dir sofort, ob deine Farbkombination die WCAG-Anforderungen für AA und AAA erfüllt.
WCAG 2.2
AA & AAA
Live-Vorschau
HEX kopieren
SO FUNKTIONIERT'S
In vier Schritten zum richtigen Kontrast
Der Kontrast-Checker hilft dir dabei, Text- und Hintergrundfarben so aufeinander abzustimmen, dass Inhalte gut lesbar bleiben. Dafür brauchst du keine Vorkenntnisse.
Kontrast ablesen
Das Tool berechnet automatisch das Kontrastverhältnis. Je höher der Wert, desto stärker unterscheiden sich Text und Hintergrund voneinander.
WCAG-Ergebnis prüfen
Du siehst sofort, ob deine Kombination die Anforderungen für AA oder AAA bei normalem und großem Text erfüllt.
Optimieren & übernehmen
Reicht der Kontrast nicht aus, erhältst du einen passenden Farbvorschlag. Anschließend kannst du die Farben direkt übernehmen oder kopieren.
Aa
Was bedeuten AA und AAA?
Die WCAG unterscheiden verschiedene Stufen für die Lesbarkeit von Texten. Für normale Webseiten ist AA der wichtigste Richtwert. AAA stellt noch höhere Anforderungen an den Kontrast.
AA
4,5 : 1
Normaler Text
AA
3 : 1
Großer Text
AAA
7 : 1
Normaler Text
AAA
4,5 : 1
Großer Text
💡
Tipp: Für normalen Fließtext solltest du mindestens 4,5 : 1 erreichen. Grün bedeutet bestanden, Rot bedeutet, dass du die Farben besser anpassen solltest.
CONTRAST CHECK
Farben auswählen & prüfen
Ändere die beiden Farben. Alle Ergebnisse aktualisieren sich sofort.
TEXTFARBE
Vordergrund
HINTERGRUND
Flächenfarbe
Beispiele:
KONTRASTVERHÄLTNIS
4.88
: 1
AA – guter Kontrast
Aa
Text
#FFFFFF
Hintergrund
#2563FF
WCAG RESULTS
Dein Ergebnis im Detail
Die wichtigsten Kontrastanforderungen auf einen Blick.
✓
AA
Normaler Text
Mindestkontrast 4,5 : 1
Bestanden
✓
AA
Großer Text
Mindestkontrast 3 : 1
Bestanden
×
AAA
Normaler Text
Mindestkontrast 7 : 1
Nicht bestanden
✓
AAA
Großer Text
Mindestkontrast 4,5 : 1
Bestanden
✓
UI
Bedienelemente & Grafiken
Richtwert für relevante visuelle Komponenten: 3 : 1
Bestanden
Was gilt als großer Text?
Als großer Text gelten mindestens etwa 18 pt bei normaler Schrift oder mindestens 14 pt bei fetter Schrift.
SMART SUGGESTION
Kontrast verbessern
Deine Farbkombination wird automatisch analysiert.
Vorgeschlagene Farbe
#FFFFFF
Kontrast 4.88 : 1
LIVE PREVIEW
So wirkt deine Farbkombination
Eine kleine Website-Vorschau zeigt dir die Farben direkt in einer realistischen Anwendung.
DEIN DESIGN
Gute Farben.
Gute Farben.
Guter Kontrast.
Lesbare Inhalte sorgen dafür, dass deine Website für möglichst viele Menschen angenehm nutzbar bleibt.
Aa
Text zuerst prüfen
Besonders Fließtext sollte einen ausreichend hohen Kontrast zum Hintergrund besitzen.
4.5
AA als gute Basis
Für normalen Text solltest du mindestens ein Kontrastverhältnis von 4,5 : 1 anstreben.
UI
Buttons nicht vergessen
Auch wichtige Bedienelemente und grafische Informationen brauchen ausreichenden Kontrast.
BESSER LESBAR. BESSERES DESIGN.
Kontrast passt?
Kopiere deine geprüften Farben und verwende sie direkt für deine Website, dein Forum oder dein nächstes Designprojekt.