Farben & Design
WCAG-Kontrast-Checker
In Sekunden wissen, ob Ihre Farben für alle lesbar sind.
Kontrastverhältnis
- AA normaler Text
- AA großer Text
- AAA normaler Text
- AAA großer Text
Vorschau
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Dezentes Grau auf Weiß mag elegant wirken – und kostet Sie trotzdem Leserinnen und Leser. Dieser Checker berechnet das exakte Kontrastverhältnis zwischen einer Text- und einer Hintergrundfarbe nach WCAG 2.1 und zeigt klare Bewertungen für die Stufen AA und AAA, jeweils für normalen und großen Text. Eine Live-Vorschau stellt einen echten Satz in Ihren Farben dar, sodass Sie das Ergebnis mit eigenen Augen beurteilen können; per Farbwähler und Tausch-Klick passen Sie beide Farben an, bis der Zielwert erreicht ist. Ideal für Buttons, Fließtext, Diagramme – überall dort, wo Text auf Farbe trifft. Unverzichtbar für barrierefreies, rechtskonformes Design, komplett kostenlos und ohne Konto.
Wie funktioniert es?
- Legen Sie Textfarbe und Hintergrundfarbe fest (Wert eingeben oder Farbwähler nutzen).
- Das Kontrastverhältnis erscheint sofort, samt AA- und AAA-Bewertung.
- Prüfen Sie in der Vorschau, wie echter Text tatsächlich wirkt.
- Passen Sie die Farben an, bis Sie die gewünschte Stufe erreichen.
Häufige Fragen
Welches Kontrastverhältnis brauche ich?
Die WCAG-Stufe AA verlangt 4.5:1 für normalen Text und 3:1 für großen Text. Die strengere Stufe AAA fordert 7:1 bzw. 4.5:1. Die meisten Websites streben AA-Konformität an.
Was gilt als „großer Text“?
Text ab 18 pt (etwa 24 px) oder ab 14 pt (etwa 18,5 px) in Fettschrift. Überschriften fallen häufig in diese Kategorie – deshalb ist für sie ein etwas geringeres Kontrastverhältnis erlaubt.
Warum ist Kontrast so wichtig?
Rund einer von zwölf Menschen hat eine Farbsehschwäche, und kontrastarmen Text auf einem Bildschirm in der Sonne kann niemand gut lesen. Guter Kontrast verbessert die Lesbarkeit für alle – und ist in immer mehr Ländern eine gesetzliche Anforderung an die Barrierefreiheit.
Meine Farben fallen durch – wie behebe ich das?
Dunkeln Sie den Text ab oder hellen Sie den Hintergrund auf, statt den Farbton komplett zu wechseln. Meist genügt eine kleine Anpassung der Helligkeit, um den Grenzwert zu erreichen und Ihre Markenfarben trotzdem wiedererkennbar zu halten.