Nicht-Text-Kontrast (WCAG 1.4.11): UI-Elemente mit 3:1 Kontrast

Während WCAG 1.4.3 den Textkontrast regelt, schließt WCAG 1.4.11 die Lücke für alles, was kein Text ist: Buttons, Icons, Formularfeld-Rahmen, Diagramm-Segmente und Zustandsanzeigen. Ohne ausreichenden Nicht-Text-Kontrast können sehbehinderte Nutzer UI-Elemente nicht erkennen – und damit auch nicht bedienen. Das BFSG macht diese Anforderung zur Pflicht.

Was zählt als Nicht-Text-Inhalt?

WCAG 1.4.11 unterscheidet zwei Kategorien: UI-Komponenten: Formularfelder (Input-Rahmen, Checkboxen, Radio-Buttons), Buttons, Links mit visueller Begrenzung, Tabs, Slider, Toggle-Switches und alle interaktiven Elemente. Der Kontrast des Elements oder seiner visuellen Begrenzung zum Hintergrund muss mindestens 3:1 betragen. Grafische Objekte: Icons, Diagramm-Segmente, Infografik-Elemente und andere nicht-dekorative Grafiken, die Information transportieren. Jedes bedeutungstragende Segment muss 3:1 Kontrast zum benachbarten Element oder Hintergrund haben. Ausnahmen: Rein dekorative Grafiken, Logos, inaktive UI-Elemente und Elemente, deren Aussehen vom User Agent bestimmt wird.

Kontrast messen und korrigieren

Nutze Tools wie den WebAIM Contrast Checker, den Colour Contrast Analyser (CCA) oder den Pipetten-Modus in Browser-DevTools. Miss den Kontrast zwischen der visuellen Begrenzung des Elements (z. B. Button-Rahmen oder -Hintergrund) und dem direkt angrenzenden Hintergrund. Typischer Fehler: Ein hellgrauer Input-Rahmen (#CCCCCC) auf weißem Hintergrund (#FFFFFF) hat nur ein Kontrastverhältnis von 1.6:1 – weit unter der 3:1-Grenze. Lösung: Den Rahmen auf mindestens #767676 oder dunkler setzen. Bei Zustandswechseln (Hover, Focus, Active) muss jeder Zustand einzeln geprüft werden – nicht nur der Default-Zustand.

Häufige Fehler bei Nicht-Text-Kontrast

Flat-Design-Buttons: Buttons ohne sichtbaren Rahmen oder mit sehr hellem Hintergrund sind für sehbehinderte Nutzer unsichtbar. Placeholder-Only-Inputs: Formularfelder, die nur durch Placeholder-Text erkennbar sind, ohne sichtbaren Rahmen. Icon-Farben: Helle Icons (z. B. hellgraue Warenkorb-Icons) auf weißem Hintergrund mit unter 3:1 Kontrast. Custom Checkboxen/Radio-Buttons: Gestylte Auswahlfelder, bei denen der Ausgewählt-Zustand zu wenig Kontrast hat. Fokus-Indikatoren: Ein schwach sichtbarer Focus-Ring zählt ebenfalls – er ist ein UI-Element-Zustand und braucht 3:1.

WCAG-Bezug

WCAG 1.4.11 Non-text Contrast ist ein Level-AA-Kriterium, das mit WCAG 2.1 eingeführt wurde. Die EN 301 549, Abschnitt 11.1.4.11, übernimmt es direkt. Es ergänzt WCAG 1.4.3 (Contrast Minimum, Text 4.5:1) und WCAG 2.4.7 (Focus Visible, Level AA). In der Praxis sollte man Text-Kontrast (1.4.3), Nicht-Text-Kontrast (1.4.11) und Focus-Sichtbarkeit (2.4.7) gemeinsam prüfen – sie hängen eng zusammen und betreffen oft dieselben Elemente.