Kontrast bei Nicht-Text-Inhalten

Was verlangt dieses Erfolgskriterium?

Die Kontrastregel aus 1.4.3 gilt ausschließlich für Text; 1.4.11 erweitert eine abgeschwächte Variante (3:1 statt 4,5:1) auf zwei weitere Kategorien. Erstens müssen visuelle Indikatoren von UI-Komponenten — also das, woran erkennbar ist, dass eine Schaltfläche eine Schaltfläche ist, wo ein Fokusrahmen liegt oder wo die Grenze eines Formularfelds verläuft — gegenüber der angrenzenden Fläche einen Kontrast von 3:1 erreichen. Zweitens müssen jene Teile bedeutsamer Grafiken, die die Nutzenden zur Orientierung benötigen — Diagrammbalken, Symbole zur Zustandsanzeige, Indikatordots — ebenfalls einen Kontrast von 3:1 erfüllen.

So wird das Erfolgskriterium erfüllt

• Jedes Formularfeld erhält einen sichtbaren Rahmen mit mindestens 3:1 Kontrast gegenüber dem Seitenhintergrund.
• Fokusindikatoren (:focus-visible-Umrandung) müssen sowohl gegenüber der Komponente als auch gegenüber der Seite einen Kontrast von mindestens 3:1 aufweisen.
• Bei Ghost- und Outline-Schaltflächen muss der Rahmen selbst gegenüber dem Seitenhintergrund einen Kontrast von 3:1 erreichen.
• Bei Toggle-Schaltern müssen Spur und Schieber im Ein- und Aus-Zustand dort, wo sie aufeinandertreffen, einen Kontrast von 3:1 besitzen.
• Bei Symbolen, die Bedeutung tragen (Info-Symbol „i“, Warndreieck, Häkchen), müssen die Linien des Symbols gegenüber ihrem Hintergrund einen Kontrast von 3:1 erreichen.
• Bei Diagrammreihen müssen die Farben zur Unterscheidung von Balken oder Linien entweder einen Kontrast von 3:1 zueinander aufweisen oder durch Muster bzw. Texturen ergänzt werden.

Häufige Fehler

• Formularfelder ohne sichtbaren Rahmen oder mit einem Rahmen der Farbe #e5e5e5 auf #fff bei 1,3:1 Kontrast — für Menschen mit Sehbeeinträchtigung faktisch unsichtbar.
• Browser-Standardstil für den Fokusrahmen durch outline: none entfernt, ohne ihn zu ersetzen.
• Ghost-Schaltflächen mit weißem Text auf transparentem Hintergrund und einem grauen 1-px-Rahmen — die Schaltfläche ist praktisch unsichtbar.
• Toggle-Schalter mit kaum sichtbarem Schieber auf einer ähnlich eingefärbten Spur im Aus-Zustand.
• Statussymbole in der Ecke einer Karte (grünes Häkchen, rotes X), bei denen die Farbe kaum vom Kartenhintergrund abweicht.
• Kreisdiagramme mit Segmentfarben, die sich nur 2:1 voneinander unterscheiden — sehende Personen erkennen die Grenzen noch, Menschen mit Sehbeeinträchtigung sehen eine einzige Fläche.

Warum das wichtig ist

1.4.11 wurde erst in WCAG 2.1 eingeführt und überrascht Teams regelmäßig — die meisten Kontrastprüfungen betreffen nur Text. Formularfeld-Rahmen, Fokusringe und Ghost-Schaltflächen sind die typischen Fehlermuster. Tools wie axe und Stark prüfen inzwischen auch den Kontrast von Nicht-Text-Inhalten, doch im Design wird dieses Kriterium oft übersehen, weil das gängige mentale Modell lautet: „Kontrast = Textkontrast.“ Die Behebung erfordert meist das Verdicken von Rahmen und das Abdunkeln von Grautönen im Design-System.