So funktioniert es
- 1Wählen Sie Text- und Hintergrundfarbe.
- 2Lesen Sie das Kontrastverhältnis und die AA-/AAA-Bewertung ab.
- 3Prüfen Sie die Live-Vorschau mit Beispieltext.
- 4Lassen Sie sich bei Bedarf die nächstgelegene Farbe vorschlagen, die den Test besteht.
Die WCAG-Grenzwerte
Die WCAG 2.x verlangen für Stufe AA ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (ab 24 px bzw. 18,66 px fett). Stufe AAA verlangt 7:1 bzw. 4,5:1. Das Verhältnis reicht von 1:1 (keine Unterscheidung) bis 21:1 (Schwarz auf Weiß).
Barrierefreiheit ist ab 2025 Pflicht
Mit dem Barrierefreiheitsstärkungsgesetz (BFSG), das die EU-Richtlinie European Accessibility Act umsetzt, müssen in Deutschland seit dem 28. Juni 2025 viele digitale Angebote wie Online-Shops und Buchungsstrecken barrierefrei sein. Maßstab ist die EN 301 549, die auf WCAG 2.1 AA verweist – ausreichender Farbkontrast ist einer der am häufigsten verfehlten Punkte.
Passende Farbe per Klick
Fällt Ihre Kombination durch, schlägt das Tool die nächstgelegene Farbe vor, die den Grenzwert erfüllt – so bleiben Sie nah an Ihrer Markenfarbe und erreichen trotzdem einen lesbaren Kontrast.
Häufige Fragen
Welches Kontrastverhältnis brauche ich?
Für die meisten Websites WCAG AA: mindestens 4,5:1 für Fließtext und 3:1 für große Überschriften sowie Bedienelemente.
Gilt das BFSG auch für meine Website?
Es betrifft vor allem Online-Shops und digitale Dienstleistungen für Verbraucher. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Mio. Euro Umsatz sind bei Dienstleistungen ausgenommen. Lassen Sie Ihren Einzelfall im Zweifel rechtlich prüfen.
Zählt Kontrast auch für Icons und Buttons?
Ja. Nach WCAG 2.1 müssen grafische Bedienelemente und deren Zustände mindestens einen Kontrast von 3:1 zur Umgebung haben.
Mit den Ergebnissen nicht zufrieden?
Sprechen Sie mit Webin Agency über schnelle, SEO-freundliche Websites, E-Commerce und Google-Ads-Betreuung.