WCAG-Kontrast: Welche Werte gelten (4,5:1 und 3:1) und wie Sie sie prüfen

Normaler Text muss ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben, großer Text mindestens 3:1, und Bedienelemente sowie aussagekräftige Grafiken ebenfalls mindestens 3:1. Das sind die Anforderungen der WCAG 2.1 auf Konformitätsstufe AA, auf die das BFSG über die harmonisierte Norm EN 301 549 verweist.

Die Werte im Einzelnen

Maßgeblich ist die tatsächlich gerenderte Größe im Browser, nicht die Angabe in der Designdatei. Ein als 18 Punkt geplanter Text, der auf Mobilgeräten mit 15 Pixel ausgeliefert wird, fällt unter die 4,5:1-Regel.

Welche Ausnahmen es wirklich gibt

• Logotypen: Text, der Teil eines Logos oder Markennamens ist, hat keine Kontrastanforderung.
• Deaktivierte Bedienelemente: inaktive Komponenten sind von 1.4.11 ausgenommen. Das gilt nicht für Elemente, die nur ausgegraut aussehen, aber bedienbar sind.
• Rein dekorative Inhalte, die keine Information tragen und für das Verständnis nicht nötig sind.
• Beiläufiger Text, etwa in einem Foto, das nicht der Informationsträger ist.

Alles andere ist keine Ausnahme, auch nicht der Hinweis der Designabteilung, dass hellgraue Schrift auf Weiß moderner aussieht. Platzhaltertexte in Formularfeldern, Fußnoten, Preisangaben in Zweitfarbe und Hinweistexte unter Eingabefeldern sind die typischen Stellen, an denen es scheitert.

Warum Kontrast der häufigste Mangel überhaupt ist

In unserer eigenen Erhebung von 520 B2C-Online-Shops aus neun EU-Ländern (axe-core, Startseite, Juni 2026) war zu geringer Textkontrast mit 72 Prozent der häufigste automatisch erkennbare Verstoß. Insgesamt erfüllten 92 Prozent der geprüften Shops die WCAG 2.1 AA nicht. Kontrast ist damit gleichzeitig der häufigste und der am leichtesten behebbare Mangel, denn er wird an einer Stelle im Designsystem entschieden und nicht in jeder Vorlage neu.

So prüfen Sie richtig

1. Automatisiert starten: Kontrastverhältnisse aus einfarbigen Hintergründen berechnen Prüfwerkzeuge zuverlässig. Das ist einer der Bereiche, in denen Automatik wirklich belastbar ist.
2. Zustände einzeln ansehen: Hover, Fokus, aktiv, besucht, Fehlerzustand und deaktiviert haben eigene Farben und fallen einzeln durch.
3. Text auf Bildern und Farbverläufen manuell bewerten: hier misst die Automatik häufig gar nicht, weil sie den Hintergrund nicht kennt. Automatisierte Prüfung erfasst insgesamt nur 30 bis 40 Prozent aller Verstöße.
4. Fokusrahmen nicht vergessen: der sichtbare Fokus muss selbst 3:1 gegen seine Umgebung erreichen, sonst ist Tastaturbedienung praktisch unmöglich.
5. Im Designsystem korrigieren, nicht in der einzelnen Seite: Farbtoken anpassen, danach einmal komplett nachprüfen.

Was Overlay-Werkzeuge hier nicht leisten

Ein eingebundenes Widget, das Nutzenden einen Kontrastmodus anbietet, ersetzt keine konforme Gestaltung. Die Anforderung gilt für die ausgelieferte Seite, nicht für einen optionalen Modus, den man erst suchen und einschalten muss. Wer ein Overlay einsetzt und die Grundfarben unverändert lässt, hat den Mangel nicht behoben, sondern verdeckt.

Dieser Artikel ist keine Rechtsberatung, keine Zertifizierung und keine Konformitätsgarantie. Er beschreibt einen strukturierten Prüf- und Dokumentationsansatz.