1.4.11 Nicht-Text-Kontrast

1. Was ist das Ziel dieses Kriteriums?

Stell dir vor, du willst online einkaufen, aber die Formularfelder sind so blass umrandet, dass du sie vom Hintergrund kaum unterscheiden kannst. Oder du analysierst ein wichtiges Diagramm für die Arbeit, aber die Linien verschwimmen vor deinen Augen, weil sie sich kaum vom Hintergrund abheben.

Menschen mit Sehbeeinträchtigungen haben genau diese Probleme täglich – aber auch Menschen ohne Behinderungen bei ungünstigem Licht oder müden Augen. Das Ziel von Erfolgskriterium 1.4.11 ist daher klar: Nicht nur Text braucht ausreichenden Kontrast, sondern auch die visuellen Elemente, die man zur Bedienung oder zum Verständnis braucht.

2. Was fordert das Erfolgskriterium genau?

Ganz konkret geht es um ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben. Das betrifft zwei Bereiche:

Bedienelemente:

• Visuelle Informationen, die nötig sind, um Bedienelemente und ihre Zustände zu erkennen
• Zum Beispiel Rahmen von Formularfeldern, Checkboxen, Schalter, Symbol-Buttons und Zustände wie fokussiert, ausgewählt oder aktiviert
• Ausgenommen: inaktive Elemente und Elemente, deren Aussehen vollständig vom Browser bestimmt und von dir nicht verändert wird

Grafische Objekte:

• Teile von Grafiken, die zum Verständnis des Inhalts erforderlich sind
• Zum Beispiel Linien und Balken in Diagrammen oder informative Icons
• Ausgenommen: Grafiken, bei denen eine bestimmte Darstellung wesentlich ist – etwa Logos, Fotos, Flaggen oder Heatmaps

Ein wichtiger Unterschied zum Textkontrast: Es geht um „angrenzende Farben“, nicht nur um Vorder- und Hintergrund. Ein Kuchendiagramm-Segment muss sich also entweder vom Hintergrund und von benachbarten Segmenten abheben – oder die Segmente werden zusätzlich durch Trennlinien oder Beschriftungen unterscheidbar gemacht.

Für Text selbst gilt weiterhin Kontrast (Minimum), und Farbe allein darf ohnehin keine Information tragen (siehe Verwendung von Farbe).

3. Warum ist das wichtig für Barrierefreiheit?

Stell dir vor, du musst ein Online-Formular ausfüllen, aber die Eingabefelder sind fast unsichtbar. Oder du sollst eine Grafik interpretieren, kannst aber die Datenpunkte nicht erkennen. So geht es Menschen mit Sehbeeinträchtigungen bei schwachem Kontrast.

Ausreichender Nicht-Text-Kontrast schafft Barrierefreiheit, weil er:

• Menschen mit geringem Sehvermögen ermöglicht, Bedienelemente zu finden und zu nutzen
• Die Orientierung auf Websites verbessert, auch bei ungünstigen Lichtverhältnissen
• Informationen in Grafiken und Diagrammen für mehr Menschen zugänglich macht
• Menschen mit Farbsehschwächen hilft, wichtige visuelle Unterschiede zu erkennen
• Die Nutzbarkeit bei müden Augen oder auf kleinen Bildschirmen verbessert

Und nicht zuletzt: Es macht deine Website robuster – auch für Menschen ohne Behinderungen, die in der Sonne aufs Smartphone schauen oder abends müde am Computer sitzen.

4. So setzt du das Kriterium erfolgreich um

Die Umsetzung erfordert ein Umdenken: von „sieht schön aus“ zu „funktioniert für alle“. Hier ein paar bewährte Praxis-Tipps:

Bedienelemente richtig kontrastieren:

• Miss mit Werkzeugen wie dem Colour Contrast Analyser oder dem WebAIM Contrast Checker
• Achte besonders auf Formularfelder: Wenn nur ein Rahmen das Feld erkennbar macht, braucht dieser Rahmen 3:1 zum Hintergrund
• Fokusindikatoren sind ein Zustand und brauchen 3:1 gegenüber den angrenzenden Farben – strengere Vorgaben macht Fokusdarstellung
• Buttons mit Text: Wenn der Text den Button eindeutig erkennbar macht, braucht der Button-Rahmen keine 3:1 – der Text muss aber 1.4.3 erfüllen
• Zustände wie „ausgewählt“ bei Checkboxen oder Tabs müssen sich mit 3:1 vom nicht ausgewählten Zustand bzw. Hintergrund abheben – oder anders erkennbar sein, z. B. durch ein Häkchen

Grafiken und Diagramme optimieren:

• Benachbarte Bereiche in Diagrammen voneinander abgrenzen (3:1 oder Trennlinien)
• Nicht nur Farbe verwenden, sondern auch Muster, Linienarten oder direkte Beschriftungen
• Icons: Die informativen Formen müssen sich vom Hintergrund abheben
• Bei komplexen Infografiken: jedes informative Element einzeln prüfen

Praktische Hilfsmittel:

• Ein Designsystem mit vordefinierten, kontrastgeprüften Farbpaaren für Rahmen, Icons und Zustände
• Regelmäßige Tests mit Farbsehschwäche-Simulatoren und in Graustufen
• Prüfung im Dark Mode und in allen Zuständen (Hover, Fokus, aktiv, ausgewählt)

Ausnahmen richtig verstehen:

• Logos dürfen ihre Originalfarben behalten
• Fotos und realistische Darstellungen sind ausgenommen
• Inaktive (deaktivierte) Bedienelemente sind ausgenommen – sollten aber trotzdem als solche erkennbar sein
• Unveränderte Standard-Bedienelemente des Browsers sind ausgenommen; sobald du sie gestaltest, gilt die Anforderung

5. Warum dieses Erfolgskriterium für Unternehmen relevant ist

Nicht-Text-Kontrast ist kein Nice-to-have – er gehört zu den Grundlagen nutzbarer Oberflächen.

1. Nutzererfahrung und Conversion verbessern

Formularfelder, die man sieht, werden ausgefüllt. Buttons, die man erkennt, werden geklickt. Diagramme, die man lesen kann, überzeugen. Wenn Bedienelemente im Hintergrund verschwinden, verlierst du Menschen auf dem Weg zum Ziel.

2. Teil des gesetzlichen Standards

Nicht-Text-Kontrast kam mit WCAG 2.1 auf Stufe AA hinzu – und WCAG 2.1 Level AA ist über die EN 301 549 der technische Maßstab für das BFSG und die BITV 2.0. Wer das Kriterium von Anfang an im Designsystem berücksichtigt, spart teure Nachbesserungen.

3. Markenimage und Professionalität stärken

Klar erkennbare Bedienelemente signalisieren Qualität und Sorgfalt. Mit barrierefreiem Design zeigst du, dass du alle Nutzer:innen ernst nimmst.

Und nicht zuletzt: rechtliche Anforderungen. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Produkte und Dienstleistungen für Verbraucher:innen, etwa Online-Shops und Bankdienstleistungen. Öffentliche Stellen sind über die BITV 2.0 bzw. Landesrecht verpflichtet. Dieser Abschnitt informiert allgemein und ersetzt keine Rechtsberatung.

6. Das Erfolgskriterium im Wortlaut des W3C

Success Criterion 1.4.11 Non-text Contrast (Level AA)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

• User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
• Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Kurz gesagt: Alles, was man braucht, um Bedienelemente und ihre Zustände zu erkennen oder Grafiken zu verstehen, muss mindestens 3:1 Kontrast zu den angrenzenden Farben haben – mit Ausnahmen für inaktive, unveränderte Browser-Elemente und wesentliche Darstellungen.