WCAG 2.1 - 1.4.11
Non-text Contrast
Die visuelle Darstellung der folgenden Elemente hat ein Kontrastverhältnis von mindestens 3:1 gegenüber benachbarten Farben:
Inhalt
Was steht in den Guidelines zum Success Criterium 1.4.11 - Non-text Contrast?Was Bedeutet das Success Criterium 1.4.11 - Non-text Contrast?Warum ist es so wichtig, das Success Criterium 1.4.11 - Non-text Contrast zu beachten?Was hat das Success Criterium 1.4.11 - Non-text Contrast mit dem BFSG zu tun?Lösungen für 1.4.11 - Non-text Contrast anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.4.11 - Non-text Contrast?Was steht in den Guidelines zum Success Criterium 1.4.11 - Non-text Contrast?
Implementationshinweise
- User Interface Components: Visuelle Informationen, die erforderlich sind, um Benutzeroberflächenkomponenten und -zustände zu identifizieren, mit Ausnahme inaktiver Komponenten oder wenn das Erscheinungsbild der Komponente vom Benutzeragenten bestimmt und nicht vom Autor modifiziert wird;
- Graphical Objects: Teile von Grafiken, die erforderlich sind, um den Inhalt zu verstehen, es sei denn, eine bestimmte Präsentation von Grafiken ist für die zu übermittelnden Informationen wesentlich.
Was Bedeutet das Success Criterium 1.4.11 - Non-text Contrast?
Das Success Criterion 1.4.11 verlangt, dass wichtige grafische Elemente und Bedienelemente auf einer Website ausreichend Farbkontrast zu ihrem Hintergrund haben. Dazu zählen zum Beispiel Buttons, Checkboxen, Eingabefelder, Schieberegler und Icons – also alles, was nicht Text ist, aber zur Bedienung oder zur Vermittlung von Informationen genutzt wird.
Die Kontrastanforderung ist ein Verhältnis von mindestens 3:1 zwischen dem Element (z.B. dem Rand eines Buttons, der Füllung eines Icons, einem Kontrollkästchen usw.) und dem angrenzenden Hintergrund. Dies gilt sowohl im Standardzustand als auch im aktiven (z.B. beim Fokus oder Hover) Zustand.
Wobei ist das besonders zu beachten?
- Umrisse, Ränder und Symbole, z.B. das "Suchen-Lupen-Icon" im Suchfeld
- Eingabefelder, Checkboxen oder Radio-Buttons
- Grafische Markierungen wie Balken in Diagrammen, Hinweise oder Statusanzeigen
Elemente, die lediglich zur Dekoration dienen oder nicht zur Bedienung bzw. Informationsvermittlung notwendig sind, müssen diese Anforderung nicht erfüllen.
Warum ist es so wichtig, das Success Criterium 1.4.11 - Non-text Contrast zu beachten?
Ein ausreichender Kontrast ist entscheidend, damit alle Nutzer, insbesondere Menschen mit Sehbehinderung, Farbfehlsichtigkeit oder altersbedingter schlechterem Sehvermögen, grafische Bedienelemente erkennen und nutzen können. Gerade bei Bedienelementen führt ein zu geringer Kontrast oft dazu, dass Funktionen übersehen werden oder die Bedienung erschwert wird. Barrierefreiheit ist so nicht mehr gegeben.
Was hat das Success Criterium 1.4.11 - Non-text Contrast mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Betreiber digitaler Angebote zur Einhaltung der WCAG, das Success Criterion 1.4.11 ist damit bindend. Ohne Einhaltung dieses Punktes ist eine Website nach BFSG nicht barrierefrei. Das kann im schlimmsten Fall zu Abmahnungen und Beschwerden führen, außerdem werden zentrale Nutzergruppen von der Nutzung ausgeschlossen, wenn sie wichtige Bedienelemente nicht sehen können.
Lösungen für 1.4.11 - Non-text Contrast anhand von Codebeispielen
Falscher Code
<button style="background: #fff; border: 1px solid #fff; color: #ccc;">Senden</button>Korrekter Code
<button style="background: #fff; border: 2px solid #0a0a0a; color: #222;">Senden</button>Im schlechten Beispiel verschwindet der Buttonrand vor weißem Hintergrund ganz oder ist kaum zu sehen, die Schrift ist zu kontrastarm. Im guten Beispiel ist der Buttonrand deutlich sichtbar und hebt sich vom Hintergrund ab, auch die Schriftfarbe wurde für besseren Kontrast angepasst.
Falscher Code
<input type="checkbox" style="accent-color: #e0e0e0;">Korrekter Code
<input type="checkbox" style="accent-color: #222;">Ein sehr heller Grauton als "accent-color" auf weißem Hintergrund ist nicht deutlich wahrnehmbar. Mit einem sehr dunklen Farbton wird das Kontrollkästchen deutlich sichtbar.
Falscher Code
<svg width="30" height="30"><circle cx="15" cy="15" r="12" fill="#98c3ec" /></svg>Korrekter Code
<svg width="30" height="30"><circle cx="15" cy="15" r="12" fill="#0a50a1" /></svg>Das helle Blau hat auf weiß kaum Kontrast. Das kräftige, dunklere Blau hebt sich deutlich ab und erfüllt das Kontrasterfordernis.
Wie löse ich Verstöße gegen das Success Criterium 1.4.11 - Non-text Contrast?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.