Farbkontrast-Checker
Kontrastverhältnis zweier Farben gegen WCAG AA/AAA prüfen.
WCAG AA verlangt 4,5:1 für normalen und 3:1 für großen Text. AAA ist strenger: 7:1 bzw. 4,5:1. Als „groß" gilt Text ab 24 px oder ab 18,5 px fett.
Alles läuft in deinem Browser. Deine Daten verlassen dieses Gerät nicht.
So funktioniert es
- Text- und Hintergrundfarbe als Hex-Wert eingeben oder über den Farbwähler bestimmen.
- Kontrastverhältnis und die vier WCAG-Bewertungen ablesen.
- In der Live-Vorschau prüfen, wie die Kombination tatsächlich wirkt.
- Bei nicht bestandenen Stufen eine Farbe abdunkeln oder aufhellen und erneut prüfen.
Prüfe, ob deine Text- und Hintergrundfarben ausreichend Kontrast für barrierefreies Design bieten — direkt im Browser berechnet nach der offiziellen WCAG-Formel.
AA vs. AAA
WCAG AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text. WCAG AAA ist strenger: 7:1 bzw. 4.5:1.
Häufige Fragen
Was bedeuten AA und AAA konkret?
AA ist die Stufe, auf die sich Gesetze wie das Barrierefreiheitsstärkungsgesetz und die EU-Richtlinie beziehen: mindestens 4,5:1 für normalen und 3:1 für großen Text. AAA ist die strengere Kür mit 7:1 beziehungsweise 4,5:1 und wird selten flächendeckend verlangt.
Ab wann gilt Text als „groß"?
Ab 24 Pixel bei normaler Schriftstärke oder ab 18,5 Pixel bei fetter Schrift. Für großen Text gelten niedrigere Kontrastanforderungen, weil dickere Buchstabenformen auch bei schwächerem Kontrast lesbar bleiben.
Warum besteht mein helles Grau den Test nicht?
Weil Kontrast nicht linear zur wahrgenommenen Helligkeit verläuft. Die WCAG-Formel gewichtet Grün am stärksten und Blau am schwächsten und rechnet mit relativer Leuchtdichte. Hellgraue Texte auf Weiß liegen deshalb fast immer unter 4,5:1, obwohl sie für Menschen mit gutem Sehvermögen noch lesbar wirken.
Gilt das auch für Buttons und Icons?
Für Bedienelemente und aussagekräftige Grafiken verlangt WCAG mindestens 3:1 gegenüber der Umgebung. Ein Button-Rand oder ein Icon darf also etwas schwächer sein als Fließtext, aber nicht beliebig blass.
Weblabs übernimmt Entwicklung, SEO und Shop-Optimierung — für alles, was über ein Werkzeug hinausgeht.