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.

Wählen Sie die Farben über das Farbfeld oder tippen Sie direkt einen HEX-Code ein. Das Ergebnis aktualisiert sich sofort.

Ergebnis

Grosse Überschrift
Das ist ein Fliesstext in normaler Schriftgrösse, wie er zum Beispiel in einem Absatz auf Ihrer Website vorkommen würde.
UI-Element
1 : 1
Kontrastverhältnis
Normaler Text – Stufe AA Mindestens 4,5 : 1
Erfüllt
Normaler Text – Stufe AAA Mindestens 7 : 1
Erfüllt
Grosser Text – Stufe AA Ab ca. 24px, mindestens 3 : 1
Erfüllt
Grosser Text – Stufe AAA Ab ca. 24px, mindestens 4,5 : 1
Erfüllt
UI-Elemente & Icons – Stufe AA Buttons, Rahmen, Symbole: mindestens 3 : 1
Erfüllt

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.