WCAG & BFSG · WCAG-Referenz: Wahrnehmbar

WCAG 1.4.11: Nicht-Text-Kontrast

Von Jakob Sommer Zuletzt geändert am 31. Juli 2026

WCAG 1.4.11 verlangt, dass Bedienelemente samt ihren Zuständen und bedeutungstragende Grafiken einen Kontrast von mindestens 3:1 zu den angrenzenden Farben haben – also der Feldrahmen, das Checkbox-Kästchen, der Fokusring, die Diagrammlinie. Ausgenommen sind inaktive Elemente, Logos und reine Fotos.

(Englisch: Non-text Contrast.)

Stufe	Prinzip	Teil der WCAG seit	Rechtlich verbindlich?
AA	Wahrnehmbar	2.1 (2018)	Ja – über EN 301 549 in BFSG & BITV

Das Wichtigste in Kürze

Die Merkregel: Text braucht 4,5:1 (1.4.3), alles andere Bedeutungstragende braucht 3:1 (1.4.11).
Zwei Gruppen fallen darunter: Bestandteile der Benutzerschnittstelle samt Zuständen – und grafische Objekte, die man zum Verstehen des Inhalts braucht.
Gemessen wird gegen die angrenzende Farbe, nicht gegen den Seitenhintergrund irgendwo weiter außen.
Nur das Erkennungsmerkmal muss den Kontrast halten. Hat ein Button eine farbige Fläche mit Text darauf, braucht sein Rahmen keine 3:1 – ist der Rahmen das Einzige, was den Button ausmacht, schon.
Der häufigste Verstoß im Web ist ein Einzeiler: border: 1px solid #ddd liegt bei rund 1,4:1 gegen Weiß.
Fokusindikatoren fallen unter dieses Kriterium. Ein zarter Ring erfüllt 2.4.7 formal und scheitert trotzdem an 1.4.11.
Automatische Prüfwerkzeuge finden hier wenig – Textkontrast ja, Grafikkontrast praktisch nicht. Das ist Handarbeit.

Braucht ein Eingabefeld-Rahmen auch Kontrast?

Ja, mindestens 3:1 zu den angrenzenden Farben – wie jedes andere Bedienelement auch.

Der Normtext fordert für zwei Gruppen jeweils 3:1 gegenüber den angrenzenden Farben:

Bestandteile der Benutzerschnittstelle: die visuelle Information, die man braucht, um ein Bedienelement zu erkennen und seinen Zustand abzulesen. Das sind Feldrahmen, Checkbox- und Radio-Umrisse, Schieberegler-Griffe, Auswahlmarkierungen, aktive Tab-Kennzeichnungen und Fokusindikatoren.
Grafische Objekte: Bildbestandteile, die zum Verstehen gebraucht werden – Linien und Segmente in Diagrammen, Piktogramme ohne Textlabel, Symbole auf Karten, der aussagetragende Teil einer Infografik.

Nicht gefordert wird der Kontrast für inaktive (disabled) Elemente, für Logos und Flaggen sowie für Fotos, bei denen die konkrete Darstellung wesentlich ist. Und – das wird oft übersehen – nicht jeder Pixel eines Elements muss den Wert halten, sondern nur die visuelle Information, die zur Identifizierung nötig ist.

Der komplette Wortlaut mit den Abgrenzungsbeispielen steht im Understanding-Dokument des W3C zu 1.4.11; im BITV-Test heißt der zugehörige Prüfschritt „1.4.11 Kontraste von Grafiken und grafischen Bedienelementen ausreichend“.

Wen betrifft es besonders?

Für Menschen mit Sehbehinderung und für alle mit altersbedingt nachlassender Kontrastempfindlichkeit ist ein hellgrauer Feldrahmen auf Weiß schlicht nicht vorhanden. Das Formular wirkt dann nicht etwa „schlecht gestaltet“, sondern so, als fehle das Feld – man tippt ins Nichts oder sucht weiter.

Dieselbe Wirkung hat es bei Zuständen. Wenn der aktive Tab nur durch eine zarte Unterstreichung markiert ist, weiß man nicht, wo man sich befindet. Wenn eine Checkbox nur an einem hauchdünnen Umriss erkennbar ist, sieht man nicht, ob sie gesetzt ist. Für Tastaturnutzer kommt der Fokusring hinzu: Er ist ihr Mauszeiger – und ein Mauszeiger, den man nicht sieht, ist keiner.

Und wie bei allen Kontrastfragen wirkt es situativ auf alle: draußen in der Sonne, auf einem alten Monitor, bei heruntergedimmter Helligkeit.

Richtig & falsch im Code

/* Falsch: Feldrahmen fast unsichtbar (≈ 1,4:1 auf Weiß) */
input, select, textarea { border: 1px solid #dddddd; }

/* Falsch: wirkt „sauber", reißt die Schwelle trotzdem (≈ 2,3:1) */
input { border: 1px solid #aaaaaa; }

/* Richtig: Rahmen ab 3:1 – hier ≈ 4,5:1 */
input, select, textarea { border: 1px solid #767676; }

/* Falsch: Fokus nur als zarte Aufhellung */
button:focus { background: #f5f8ff; outline: none; }

/* Richtig: kräftiger Ring mit Abstand – erfüllt 2.4.7 und 1.4.11 */
button:focus-visible {
  outline: 3px solid #1a4fd6;
  outline-offset: 2px;
}

Ein Sonderfall, der regelmäßig diskutiert wird: eigene Checkboxen und Radiobuttons. Wer das native Aussehen ersetzt, übernimmt damit auch die Verantwortung für Umriss, Häkchen und Fokus:

/* Richtig: eigenes Kästchen mit sichtbarem Rahmen und sichtbarem Zustand */
input[type="checkbox"] {
  appearance: none;
  width: 1.25rem; height: 1.25rem;
  border: 2px solid #767676;   /* 4,5:1 – erkennbar als Bedienelement */
  border-radius: 0.25rem;
}
input[type="checkbox"]:checked {
  background: #1a4fd6;          /* 6,8:1 gegen Weiß – Zustand erkennbar */
  border-color: #1a4fd6;
}

Bei Diagrammen gilt dasselbe für die Datenreihen: Zwei benachbarte Segmente einer Tortengrafik müssen sich mit 3:1 voneinander abheben, sonst ist die Grafik nicht ablesbar. Wer viele Reihen hat, arbeitet zusätzlich mit Mustern oder direkter Beschriftung – das verlangt ohnehin schon 1.4.1 Benutzung von Farbe.

So testest du es

Inventur anlegen: Feldrahmen, Checkbox- und Radio-Umrisse, Fokusringe, aktive Tabs, Slider-Griffe, Icon-Buttons ohne Text, Diagrammfarben. Diese Liste ist die Prüfliste – ohne sie übersieht man die Hälfte.
Farbwerte abgreifen: Mit der Pipette der DevTools oder dem Colour Contrast Analyser die Elementfarbe und die direkt angrenzende Farbe messen.
Gegen 3:1 prüfen: Im Kontrast-Check dieser Website den Zwei-Farben-Modus nutzen – die 3:1-Grenze wird dort als „großer Text“ ausgewiesen.
Zustände einzeln durchgehen: Ruhezustand, Hover, Fokus, aktiv, ausgewählt, Fehler. Jeder Zustand ist eine eigene Messung.
Auf beiden Farbschemata wiederholen und, falls vorhanden, im Kontrastmodus des Betriebssystems gegenprüfen.

Häufiger Fehler in der Praxis

Der mit Abstand häufigste Fund ist der hellgraue Feldrahmen. Er steckt in praktisch jedem CSS-Framework und in jedem zweiten Design-System, weil er ruhig wirkt – und liegt zwischen 1,2:1 und 2,4:1. Das ist ein Fund, der sich in einer einzigen Zeile beheben lässt und trotzdem in fast jedem Audit auftaucht.

Der zweite ist das randlose Eingabefeld: nur eine hellgraue Füllfläche, kein Rahmen. Hier zählt die Füllfläche als Erkennungsmerkmal und muss 3:1 gegen die Umgebung halten – ein #f5f5f5-Feld auf weißem Grund liegt bei 1,1:1. Optisch sehr modern, praktisch unsichtbar. Wenn du dieses Muster behalten willst, brauchst du entweder eine dunklere Füllung oder doch einen Rahmen.

Der dritte betrifft Icon-Buttons in hellen Farben: ein weißes Symbol auf hellblauem Grund, ein hellgraues Symbol auf Weiß. Bei Icons ohne Textlabel ist das Symbol selbst die Information und braucht 3:1. Sowas fällt spät auf, weil das Icon auf dem Retina-Display des Designers gestochen scharf wirkt – auf einem durchschnittlichen Büromonitor verschwindet es.

Häufige Fragen

Muss jeder Button einen Rahmen mit 3:1 haben?

Nein. Der Kontrast wird für die visuelle Information verlangt, die zur Identifizierung nötig ist. Ein blauer Button mit weißer Beschriftung ist bereits an seiner Fläche erkennbar – der Rahmen ist dann Dekoration. Ist der Button aber nur ein Textlabel mit dünnem Rahmen drumherum, ist der Rahmen das Erkennungsmerkmal und braucht 3:1.

Gilt 1.4.11 auch für den Fokusring?

Ja. Der Fokusindikator ist ein Zustand eines Bedienelements und fällt damit unter das Kriterium. Deshalb genügt es nicht, den Standardring durch einen zarten Schatten zu ersetzen: Sichtbar sein (2.4.7) und messbar kontrastreich sein (1.4.11) sind zwei getrennte Anforderungen.

Wie viel Kontrast brauchen Diagramme?

Jede Information, die man zum Ablesen braucht, benötigt 3:1 gegen ihre Nachbarn – also Linie gegen Hintergrund und benachbarte Flächen gegeneinander. Reine Deko-Elemente wie Gitternetzlinien sind ausgenommen, solange man sie zum Verstehen nicht braucht. Zusätzliche Sicherheit bringen Direktbeschriftung und unterscheidbare Linienformen.

Warum finden axe und Lighthouse hier so wenig?

Weil die Werkzeuge Textknoten und ihre berechneten Hintergrundfarben auswerten können – aber nicht wissen, welcher Teil einer Grafik bedeutungstragend ist oder welche Farbe an einen Rahmen angrenzt. Für 1.4.11 gibt es deshalb keine verlässliche Automatik; die Inventur aus Schritt 1 ersetzt sie.