Kontrast-Prüfer

So benutzt du Kontrast-Prüfer

1. Wähl Vorder- und Hintergrundfarbe.
2. Lies das Kontrastverhältnis und die Bestanden-Matrix für AA und AAA ab.
3. Nutz den Vorschlag, um eine knapp durchgefallene Kombination zu korrigieren.

Seit Juni 2025 ist Barrierefreiheit Pflicht, nicht Kür

Das Barrierefreiheitsstärkungsgesetz setzt den European Accessibility Act in deutsches Recht um und gilt seit dem 28. Juni 2025. Es ist die wichtigste Änderung für deutsche Websites seit der DSGVO — und deutlich weniger bekannt.

Betroffen sind nicht nur Behörden, für die schon vorher die BITV galt, sondern auch private Anbieter: Online-Shops, Buchungssysteme, Bankdienstleistungen, Telekommunikation, E-Books, Personenbeförderung. Wer online Verträge mit Verbrauchern schließt, fällt in der Regel darunter.

Ausgenommen sind Kleinstunternehmen, die Dienstleistungen anbieten — weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz. Für Produkte gilt diese Ausnahme nicht.

Maßstab ist die harmonisierte Norm EN 301 549, die für Webinhalte auf WCAG 2.1 Stufe AA verweist. Damit sind die 4,5:1 aus der Tabelle unten der rechtlich maßgebliche Wert. Die Marktüberwachung liegt bei den Ländern; bei Verstößen sind Anordnungen und Bußgelder möglich, und Verbände können Verstöße geltend machen.

Die Schwellen

Zwei Stufen, und die Einordnung als „großer Text" ist enger gefasst, als viele annehmen.

„Groß" beginnt bei 24 Pixeln, oder bei 18,66 Pixeln wenn der Text fett gesetzt ist. Die verbreitete Annahme, Überschriften seien automatisch großer Text, trifft für eine 20-Pixel-Zwischenüberschrift in normaler Stärke nicht zu — dort gelten die 4,5:1.

Häufig übersehen wird die dritte Zeile: Auch Eingabefelder, Umrandungen von Schaltflächen und der Tastaturfokus brauchen 3:1 gegen ihre Umgebung. Ein hellgrauer Rahmen auf Weiß ist ein klassischer Verstoß.

Eine durchgefallene Kombination reparieren

Meist genügt eine Anpassung der Helligkeit; der Farbton kann bleiben.

Der wirksamste Hebel ist, den Text abzudunkeln statt den Hintergrund aufzuhellen — das erhält die Gestaltung eher. In OKLCH lässt sich das gezielt machen, weil dort nur die Helligkeitsachse verändert wird und der Farbeindruck erhalten bleibt.

Bei Markenfarben, die nicht verändert werden dürfen, gibt es zwei Auswege: die Farbe für Flächen statt für Text verwenden, oder eine abgedunkelte Variante ausschließlich für Text definieren. Viele Marken haben genau deshalb ein „Web-Dunkel" ihrer Hauptfarbe.

Nicht helfen dagegen: dünnere Schrift, Schatten hinter dem Text, oder größere Schrift knapp unterhalb der Grenze. Die Prüfung misst Farben, nicht Absichten.

Was die WCAG-Formel nicht erfasst

Der Kontrastwert nach WCAG 2 ist bekanntermaßen unvollkommen, und man sollte wissen wo.

Er unterschätzt dünne Schrift: Ein 300er Schnitt bei 14 Pixeln kann rechnerisch bestehen und trotzdem schwer lesbar sein. Und er bewertet manche dunklen Kombinationen zu günstig — heller Text auf dunklem Grund besteht oft rechnerisch, wirkt aber durch Überstrahlen unruhig.

Der Nachfolger APCA rechnet wahrnehmungsnäher und berücksichtigt Schriftgröße und -stärke. Er ist als Kandidat für WCAG 3 vorgesehen, aber noch nicht normativ — und damit rechtlich derzeit nicht maßgeblich.

Praktisch heißt das: Nach WCAG 2 prüfen, weil das die Rechtslage ist. Und bei Werten knapp über der Grenze zusätzlich mit den Augen prüfen, am besten auf einem Telefon bei Tageslicht.

Häufige Fragen