Das Tool verwendet die offizielle WCAG-Formel für relative Leuchtdichte, sodass die Ergebnisse mit dem WebAIM-Checker und gängigen Barrierefreiheitsprüfungen übereinstimmen. Alles läuft im Browser - Farben werden nicht hochgeladen, und es gibt keine Nutzungsbeschränkungen.
Farbkontrast prüfen
Läuft komplett in deinem Browser - kein Upload, keine Anmeldung.
Kontrastverhältnis
Bestandenbenötigt 4.5:1
Bestandenbenötigt 3:1
Nicht bestandenbenötigt 7:1
Bestandenbenötigt 4.5:1
Groß = 18 pt (24 px) oder 14 pt (18,66 px) fett.
Was ist ein Farbkontrast-Checker?
Ein Farbkontrast-Checker berechnet das Kontrastverhältnis zwischen Textfarbe und Hintergrund und zeigt, ob es die WCAG-Barrierefreiheitsstandards erfüllt. Das Ergebnis liegt zwischen 1:1 und 21:1 - dazu erscheint direkt, ob AA und AAA für Normal- und Großtext bestanden werden.
So funktioniert’s
- 1Farben eingeben. Hex-Code, rgb()-Wert oder CSS-Farbname für Text und Hintergrund eingeben - oder direkt über die Farbfelder auswählen.
- 2Kontrastverhältnis ablesen. Das Kontrastverhältnis aktualisiert sich live, zusammen mit einer Vorschau des Textes auf dem gewählten Hintergrund.
- 3Ergebnis-Badges prüfen. Jeder Badge zeigt, ob WCAG AA und AAA für Normal- und Großtext bestanden oder nicht bestanden werden.
Für wen
- Designer, die Markenfarben testen, bevor sie in die Entwicklung gehen.
- Frontend-Entwickler, die Button-, Link- und Beschriftungsfarben gegen WCAG AA prüfen.
- Barrierefreiheitsprüfer, die Kontrastfehler mit genauen Verhältniswerten dokumentieren.
- Content- und E-Mail-Teams, die sicherstellen, dass Text auf farbigen Hintergründen lesbar bleibt.
Häufige Fragen
Ist der Farbkontrast-Checker kostenlos?
Ja - vollständig kostenlos, ohne Anmeldung und ohne Nutzungslimits. Das Tool läuft komplett im Browser.
Welches Kontrastverhältnis brauche ich für WCAG AA?
WCAG 2.1 Level AA fordert mindestens 4,5:1 für Normaltext und 3:1 für Großtext. Level AAA erhöht die Anforderungen auf 7:1 für Normaltext und 4,5:1 für Großtext.
Was gilt als Großtext?
Großtext umfasst Text ab 18 pt (ca. 24 px) in normaler Stärke oder ab 14 pt (ca. 18,66 px) in Fettschrift. Für Großtext gilt ein niedrigeres Mindestkontrasterfordernis, da größere Glyphen leichter lesbar sind.
Wie wird das Kontrastverhältnis berechnet?
Die Formel lautet (L1 + 0,05) / (L2 + 0,05), wobei L1 und L2 die relative Leuchtdichte der helleren und dunkleren Farbe sind. Die Leuchtdichte wird aus den sRGB-Kanälen Rot, Grün und Blau gemäß der WCAG-2.x-Definition berechnet.
Werden Hex, RGB und Farbnamen unterstützt?
Ja. Eingaben als 3-, 4-, 6- oder 8-stelliger Hex-Code, als rgb()- oder rgba()-Wert sowie als CSS-Farbname wie „teal“ sind möglich. Farben lassen sich auch direkt über das Farbfeld wählen.
Warum besteht dasselbe Verhältnis manchmal und manchmal nicht?
Das hängt von Textgröße und angestrebtem Level ab. Ein Verhältnis von 3,5:1 besteht AA für Großtext, scheitert aber an AA für Normaltext - deshalb immer gegen die tatsächlich verwendete Größe und das gewünschte Level prüfen.