WCAG-Kontrastchecker
Prüfen Sie in Sekunden, ob der Farbkontrast Ihrer Website den WCAG Richtlinien entspricht. Wählen Sie Text und Hintergrundfarbe, das Ergebnis erscheint sofort inklusive Vorschlag für eine barrierefreie Alternative.
Ergebnis
Farben finden, die von Grund auf harmonieren
Fehlt Ihnen noch die passende Farbkombination für Ihr Design? Wenn ein Kontrast einmal nicht ausreicht oder Sie neue Inspiration für Akzent- und Hintergrundfarben suchen, nutzen Sie unseren Farbgenerator. Er berechnet automatisch harmonische Abstufungen, Komplementärfarben und RGB-Variationen zu Ihrer Wunschfarbe.
Über den WCAG-Kontrastchecker
Ausreichender Farbkontrast entscheidet mit, ob Texte auf einer Website tatsächlich für alle gut lesbar sind. Menschen mit Sehschwäche oder Farbfehlsichtigkeit, aber auch alle anderen bei hellem Sonnenlicht am Smartphone-Display, profitieren von einem klaren Unterschied zwischen Text und Hintergrund. Genau das prüft dieser Kontrastchecker nach den offiziellen WCAG Richtlinien.
Geben Sie einfach Ihre gewünschte Textfarbe und Hintergrundfarbe ein, das Tool berechnet sofort das Kontrastverhältnis und zeigt an, welche WCAG Stufen erfüllt sind, für normalen Text, grossen Text sowie für UI-Elemente wie Buttons und Icons. Reicht der Kontrast nicht aus, schlägt Ihnen der Checker eine passende Alternativfarbe vor, mit der Sie die Anforderung mit möglichst kleiner Anpassung erreichen.
Bei DSMK bauen wir Websites, die nicht nur gut aussehen, sondern auch für möglichst viele Menschen zugänglich sind. Seit 28. Juni 2025 gilt in Österreich ausserdem das Barrierefreiheitsgesetz, das digitale Angebote für Verbraucher unter anderem an Standards wie WCAG 2.1 heranführt. Wenn Sie Ihre Website barrierefrei und zugänglich gestalten möchten, unterstützen wir Sie gerne dabei. Erfahren Sie mehr über unsere digitalen Dienstleistungen.
WCAG-Grenzwerte im Überblick
| Element | Stufe | Mindestkontrast |
|---|---|---|
| Normaler Text | AA | 4,5 : 1 |
| Normaler Text | AAA | 7 : 1 |
| Grosser Text (ab ca. 24px oder ca. 19px fett) | AA | 3 : 1 |
| Grosser Text (ab ca. 24px oder ca. 19px fett) | AAA | 4,5 : 1 |
| Grafische Objekte & UI-Elemente | AA | 3 : 1 |
Häufig gestellte Fragen zum Farbkontrast
- Welcher Kontrast wird für WCAG AA benötigt?
- Für normalen Fliesstext verlangt die Stufe AA ein Kontrastverhältnis von mindestens 4,5 zu 1 zwischen Text und Hintergrund. Bei grossem Text, also ab etwa 24 Pixel oder ab rund 19 Pixel bei fetter Schrift, genügen bereits 3 zu 1. Diese Werte gelten seit WCAG 2.0 und wurden in WCAG 2.1 und 2.2 unverändert übernommen.
- Was unterscheidet WCAG AA von WCAG AAA?
- AA ist die in der Praxis übliche Zielstufe und wird auch in Gesetzen als Maßstab herangezogen. AAA ist strenger und verlangt 7 zu 1 bei normalem Text beziehungsweise 4,5 zu 1 bei grossem Text. Diese Stufe ist vor allem für spezialisierte Angebote sinnvoll, für die meisten Websites reicht die Erfüllung von AA völlig aus.
- Ist ausreichender Farbkontrast in Österreich verpflichtend?
- Seit 28. Juni 2025 gilt in Österreich das Barrierefreiheitsgesetz als nationale Umsetzung des European Accessibility Act. Es verpflichtet unter anderem Betreiber von Webshops und digitalen Diensten für Verbraucher, ihre Angebote weitgehend an die Norm EN 301 549 anzupassen, die sich inhaltlich stark an WCAG 2.1 Stufe AA orientiert. Ob und in welchem Umfang die Pflicht im Einzelfall greift, hängt von der Art des Angebots ab. Für eine rechtliche Einschätzung empfehlen wir, sich an eine spezialisierte Kanzlei zu wenden.
- Reicht dieser Kontrastchecker für eine vollständige Barrierefreiheitsprüfung?
- Nein. Ausreichender Farbkontrast ist nur eines von vielen WCAG Kriterien. Für eine vollständige Prüfung gehören unter anderem auch Tastaturbedienbarkeit, sinnvolle Alternativtexte, eine klare Struktur und die Kompatibilität mit Screenreadern dazu. Der Kontrastchecker eignet sich als schneller erster Schritt und als laufendes Werkzeug im Gestaltungsprozess.
- Wie berechnet sich das Kontrastverhältnis genau?
- Grundlage ist die relative Leuchtdichte beider Farben, die aus den einzelnen RGB Werten berechnet wird. Das Kontrastverhältnis ergibt sich aus dem Verhältnis der helleren zur dunkleren Leuchtdichte und liegt zwischen 1 zu 1 (kein Unterschied) und 21 zu 1 (Schwarz auf Weiss). Genau diese Formel verwendet auch unser Rechner oben.