Farbkontrast-Prüfer
Prüfen Sie, ob Text- und Hintergrundfarben gut lesbar sind und die WCAG-Stufen AA und AAA erfüllen.
Kontrastverhältnis
Große Überschrift
Kleiner Text muss lesbar bleiben.
WCAG-2.2-Regeln: Stufe AA = empfohlenes Minimum (und gesetzlich für Barrierefreiheit gefordert), Stufe AAA = erweitert.
Alles läuft in Ihrem Browser: Es werden keine Daten gesendet.
Über dieses Tool
Dieser Farbkontrast-Prüfer berechnet das Kontrastverhältnis zwischen Textfarbe und Hintergrundfarbe nach der Formel der Barrierefreiheitsrichtlinien WCAG. Er zeigt sofort, ob die Kombination die Stufen AA und AAA für normalen Text, großen Text und Bedienelemente erfüllt. Hilfreich bei der Gestaltung von Websites, Apps, Plakaten oder Speisekarten, die für alle gut lesbar sein sollen.
Geben Sie zwei HEX-Codes ein oder nutzen Sie die Farbwähler: Eine Live-Vorschau zeigt Überschrift und Fließtext in Ihren Farben. Reicht der Kontrast für Stufe AA (4,5:1) nicht aus, schlägt das Tool eine ähnliche, konforme Textfarbe mit gleichem Farbton vor, die Sie per Klick übernehmen. Außerdem können Sie Text und Hintergrund tauschen und einen Link zum Teilen kopieren.
- Sofortige Berechnung des WCAG-Kontrastverhältnisses
- AA und AAA für normalen und großen Text
- 3:1-Prüfung für Symbole und Bedienelemente
- Vorschlag einer AA-konformen Textfarbe
- Live-Vorschau und Link zum Teilen
So funktioniert es
- Geben Sie „Textfarbe“ und „Hintergrundfarbe“ ein (HEX-Code oder Farbwähler).
- Lesen Sie das „Kontrastverhältnis“ und die Tabelle mit den Prüfergebnissen.
- Klicken Sie bei Bedarf auf „Diese Farbe verwenden“, um den Vorschlag zu übernehmen.
- Kopieren Sie den Link zum Teilen, um die Kombination weiterzugeben.
Häufige Fragen
Werden meine Farben irgendwohin gesendet?
Nein. Die Berechnung läuft vollständig in Ihrem Browser, es werden keine Daten gesendet. Die beiden Farben stehen nur in der Seitenadresse für den Link zum Teilen.
Ist der Kontrast-Prüfer kostenlos?
Ja, er ist kostenlos und ohne Konto oder Registrierung nutzbar.
Welches Kontrastverhältnis brauche ich für WCAG AA?
Die WCAG verlangen auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Stufe AAA verlangt 7:1 bzw. 4,5:1. Symbole und Bedienelemente benötigen 3:1.
Wie korrigiere ich eine zu helle Textfarbe?
Liegt das Verhältnis unter 4,5:1, dunkelt das Tool Ihre Textfarbe ab oder hellt sie auf, ohne den Farbton zu ändern, bis Stufe AA erreicht ist. Mit „Diese Farbe verwenden“ übernehmen Sie sie.