Nicht-Text-Kontrast

Englisch: Non-text contrast · Zuletzt geprüft: 27. September 2026

Worum es geht

Das Kriterium kam mit WCAG 2.1 hinzu. Es schließt eine Lücke: Text war schon lange durch WCAG 1.4.3 abgedeckt, aber ein Eingabefeld mit hellgrauem Rahmen auf Weiß war für viele Menschen mit Sehbehinderung einfach unsichtbar. Man sieht nicht, wo man klicken soll, oder nicht, ob ein Kontrollkästchen angehakt ist.

Zwei Gruppen von Dingen sind betroffen ^[1][2]:

• Bedienelemente und ihre Zustände: alles, was man braucht, um ein Element zu erkennen – den Rahmen eines Feldes, die Form eines Schalters, das Häkchen, die Markierung des aktiven Reiters, den Fokusrahmen.
• Grafische Objekte: Teile einer Grafik, die man zum Verstehen braucht, etwa die Linien eines Diagramms oder ein Warnsymbol ohne Text daneben.

Was nicht darunter fällt

• Inaktive Bedienelemente, die nicht benutzt werden können.
• Elemente, deren Aussehen allein der Browser bestimmt, weil die Seite es nicht verändert hat.
• Grafiken, bei denen eine bestimmte Darstellung wesentlich ist, etwa ein Foto, eine Flagge oder eine Heatmap.
• Knöpfe mit Text, deren Fläche keinen Rahmen braucht, um erkannt zu werden: Hier zählt der Textkontrast.

Beispiele

• Ein Eingabefeld mit Rahmen #ccc auf Weiß hat etwa 1,6:1 – zu wenig. Ein Rahmen #767676 erreicht rund 4,5:1.
• Ein Diagramm mit hellblauer und hellgrüner Linie: Die Linien brauchen je 3:1 zum Hintergrund. Beschriftungen direkt an den Linien helfen zusätzlich.
• Ein Fokusrahmen in Hellrosa auf Weiß ist kaum zu sehen.

Im Code

/* Zu schwach: etwa 1,6:1 */
input { border: 1px solid #ccc; }

/* Besser: gut 4,5:1, dazu ein Fokusrahmen */
input { border: 1px solid #767676; }
input:focus-visible {
  outline: 3px solid #1a4fd6;
  outline-offset: 2px;
}

So prüfen Sie es

Gehen Sie jedes Bedienelement durch und fragen Sie: Was muss ich sehen, um es zu erkennen und seinen Zustand zu verstehen? Messen Sie genau diese Farbe gegen ihre Umgebung. Prüfen Sie auch Hover, Fokus und ausgewählte Zustände.

Wie Reviseberg damit umgeht

WCAG 1.4.11 lässt sich nur teilweise automatisch prüfen: Welches Pixel zum Erkennen eines Elements nötig ist, ist oft eine Frage des Urteils. Reviseberg misst mit dem Tastatur-Agenten, ob ein fokussiertes Element überhaupt eine sichtbare Markierung bekommt (keyboard:focus-visible). Den Kontrast von Rahmen, Symbolen und Diagrammen beurteilt eine Person. Reviseberg führt das Kriterium deshalb als nur teilweise automatisch prüfbar und meldet es nie allein aufgrund der Messung als bestanden.

Verwandte Begriffe

Kontrastverhältnis · Fokusindikator · Formularbeschriftung · Bildschirmlupe

Weiterführend

• WCAG 1.4.11 Nicht-Text-Kontrast
• WCAG 1.4.3 Kontrast (Minimum)
• WCAG 2.4.7 Fokus sichtbar