Kontrast prüfen — nach WCAG, direkt im Browser.
Text- und Hintergrundfarbe eingeben, sofort sehen, ob die Kombination die Anforderungen an barrierefreie Websites erfüllt. Und wenn nicht: Der Checker schlägt die nächste Farbe vor, die passt.
- Prüft nach WCAG 2.1 — der Maßstab hinter BFSG und BaFG
- Vorschlag für die nächste passende Farbe, per Klick übernommen
- Läuft lokal, nichts wird gesendet oder gespeichert
Was die WCAG beim Kontrast verlangen
Drei Werte decken fast jede Website ab. Welcher gilt, hängt davon ab, was auf der Farbe steht.
Fließtext braucht 4,5 : 1
Alles, was gelesen werden soll — Absätze, Menüpunkte, Formularbeschriftungen, Preise. Hellgrauer Text auf Weiß ist der häufigste Fehler und fällt fast immer durch.
Große Schrift reicht 3 : 1
Als groß gilt Text ab 24 px oder ab etwa 18,7 px in Fett. Große Überschriften dürfen also etwas heller sein als der Text darunter.
Bedienelemente brauchen 3 : 1
Rahmen von Eingabefeldern, Icons ohne Text, Fokus-Markierungen. Ein Button, dessen Umriss sich kaum vom Hintergrund abhebt, ist für viele Menschen unsichtbar.
Ausgenommen sind Logos, reine Dekoration und deaktivierte Bedienelemente. Das Verhältnis reicht von 1 : 1 (gleiche Farbe) bis 21 : 1 (Schwarz auf Weiß). Die europäische Norm EN 301 549, auf die sich BFSG und BaFG stützen, baut für Websites auf WCAG in der Stufe AA auf.
Kontrast ist ein Punkt von vielen
Seit dem 28. Juni 2025 gelten in Deutschland das Barrierefreiheitsstärkungsgesetz und in Österreich das Barrierefreiheitsgesetz. Betroffen sind vor allem Websites, über die Verbraucher etwas kaufen, buchen oder einen Vertrag abschließen — Online-Shops, Buchungsstrecken, Terminbuchungen. Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen.
Farbkontrast ist dabei der Punkt, der sich am schnellsten prüfen und beheben lässt. Dazu kommen Tastaturbedienung, Alternativtexte, Formulare, Überschriften-Struktur und eine Erklärung zur Barrierefreiheit.
Wenn Sie wissen möchten, wo Ihre Website steht: Ich prüfe sie und sage Ihnen, was zu tun ist — und was nicht.
Kurz beantwortet
Und wenn etwas fehlt: Schreiben Sie mir über das Kontaktformular.
Welcher Kontrast ist für meine Website Pflicht?
Für barrierefreie Websites gilt WCAG in der Stufe AA: mindestens 4,5 : 1 für normalen Text und 3 : 1 für große Schrift sowie für Buttons, Icons und Feldrahmen. Die Stufe AAA ist freiwillig.
Was ist der Unterschied zwischen AA und AAA?
AA ist die Stufe, die Gesetze und Normen verlangen. AAA ist strenger (7 : 1 für normalen Text) und für ganze Websites kaum umsetzbar, ohne das Design stark einzuschränken. Für einzelne, besonders wichtige Texte kann sie trotzdem sinnvoll sein.
Was zählt als große Schrift?
Text ab 18 Punkt, das entspricht 24 Pixel, oder ab 14 Punkt in Fett, das sind rund 18,7 Pixel. Für großen Text reicht ein Kontrast von 3 : 1.
Gilt der Kontrast auch für Buttons und Icons?
Ja. Alles, was man erkennen muss, um die Seite zu bedienen, braucht mindestens 3 : 1 zur Umgebung: der Umriss eines Eingabefelds, ein Symbol ohne Beschriftung, die Fokus-Markierung beim Navigieren mit der Tastatur.
Muss meine Website überhaupt barrierefrei sein?
Das hängt davon ab, was Ihre Website tut und wie groß Ihr Unternehmen ist. Betroffen sind vor allem Angebote, über die Verbraucher online etwas kaufen, buchen oder abschließen. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen. Im Einzelfall klärt das eine Rechtsberatung — gute Kontraste lohnen sich aber immer, weil sie jeder besser lesen kann.
Wird gespeichert, was ich hier eingebe?
Nein. Die Berechnung läuft vollständig in Ihrem Browser. Es wird nichts an einen Server gesendet und nichts protokolliert.
Werkzeuge, die mir selbst die Arbeit abnehmen
Diesen Checker nutze ich bei jedem Projekt, bevor ein Design live geht. Auf der Tools-Seite finden Sie die übrigen — und wenn Sie für Ihr Projekt etwas brauchen, das es so noch nicht gibt, baue ich es.