Erfolgskriterien

WCAG 1.4.11 Nicht-Text-Kontrast

Erfolgskriterium 1.4.11 verlangt ein Kontrastverhältnis von mindestens 3:1 für die visuellen Grenzen von Benutzeroberflächen-Komponenten und für grafische Objekte, die zum Verständnis des Inhalts erforderlich sind, gegenüber ihren angrenzenden Farben. Es ist ein Kriterium der Stufe AA unter Richtlinie 1.4 (Unterscheidbar), hinzugefügt in WCAG 2.1 – das Nicht-Text-Pendant zur Textkontrastanforderung von 1.4.3.

Was dies abdeckt, was 1.4.3 nicht tut

1.4.3 betrifft speziell Text. Dieses Kriterium schließt die Lücke für alles andere, das visuelle Bedeutung trägt, aber kein Text ist:

• Rahmen und Zustände von Formularfeldern – der Umriss eines Eingabefelds benötigt genug Kontrast gegenüber seinem Hintergrund, um tatsächlich als eigenständiges, interaktives Element wahrgenommen zu werden, nicht nur als kaum sichtbarer Streifen
• Symbole, die Bedeutung vermitteln, ohne begleitenden Text (ein Papierkorb-Symbol, ein Häkchen)
• Fokusindikatoren – der Umriss, der angezeigt wird, wenn ein Tastaturnutzer zu einem Element tabbt, benötigt ausreichenden Kontrast, um tatsächlich sichtbar zu sein
• Diagramm- und Chart-Elemente – Balken, Linien und Datenpunkte, die zum Verständnis der Daten benötigt werden

Was ausgenommen ist

Rein dekorative Grafiken, die zum Verständnis des Inhalts nicht unterschieden werden müssen, Logos und inaktive/deaktivierte UI-Komponenten sind alle ausgenommen – dieselbe Logik wie die Ausnahmen von 1.4.3 für beiläufigen und dekorativen Inhalt.

Warum dies genauso wichtig ist wie Textkontrast

Ein wunderschön kontrastierter Textabsatz nützt nichts, wenn der Rahmen der "Absenden"-Schaltfläche gegenüber dem Seitenhintergrund fast unsichtbar ist, oder wenn der Fehlerzustand-Umriss eines Pflichtfelds zu subtil ist, um bemerkt zu werden. Dieses Kriterium existiert, weil die Struktur der Oberfläche – zu wissen, wo eine Komponente endet und eine andere beginnt, zu sehen, dass ein Steuerelement fokussiert ist – genauso wesentlich für die korrekte Wahrnehmung einer Seite ist wie das Lesen ihres Textes, und Nutzer mit Sehbehinderung sind von unzureichendem UI-Kontrast genauso betroffen wie von unzureichendem Textkontrast.

Praktische Hinweise

Prüfen Sie auf dieselbe Weise, wie Sie Textkontrast prüfen würden – messen Sie die tatsächlichen Farbwerte des Rahmens/Symbols einer Komponente gegenüber ihrem unmittelbaren Hintergrund mit einem echten Kontrastrechner, schätzen Sie nicht visuell. Designsysteme mit sehr hellen, subtilen Rahmen (eine verbreitete minimalistische ästhetische Entscheidung) sind hier die häufigste Fehlerquelle.

Häufige Fragen

Was ist WCAG 1.4.11?

Ein Kriterium der Stufe AA, das mindestens 3:1 Kontrast für die visuellen Begrenzungen aktiver Bedienelemente und für Grafikteile verlangt, die zum Verständnis nötig sind.

Wofür gilt 1.4.11?

Für Feldrahmen, Schaltflächenkanten, Fokusanzeigen, Zustandsanzeigen sowie bedeutungstragende Symbol- oder Diagrammelemente – nicht für dekorative Grafiken oder inaktive Elemente.

Worin unterscheidet sich 1.4.11 von 1.4.3?

1.4.3 betrifft den Textkontrast (4,5:1 bzw. 3:1); 1.4.11 betrifft visuelle Nicht-Text-Elemente wie Bedienelemente und Grafiken mit 3:1.