Kontrast für Rahmen, Icons und UI-Komponenten

Sieh dir die Eingabefeld-Rahmen in den Produkten an, die du täglich benutzt: ein Hauch von Grau auf Weiß, oft ein Wert der Klasse #D1D5DB, der gegen die Seite ≈1,5:1 misst. In einem schwach beleuchteten Raum, auf einem minderwertigen Display oder durch alternde Augen ist die Feldbegrenzung schlicht nicht da — der Nutzer zielt auf ein Textfeld, dessen Kanten er nicht sehen kann. Der Rahmen hat jede Prüfung bestanden, weil Prüfungen auf Textkontrast schauen, und ein Rahmen ist kein Text.

WCAG deckt das unter 1.4.11, Nicht-Text-Kontrast, ab: die visuelle Information, die nötig ist, um eine Komponente oder ihren Zustand zu erkennen — Feldbegrenzungen, bedeutungstragende Icons, Fokusindikatoren, Unterschiede zwischen angehakt und nicht angehakt — braucht 3:1 gegen ihre benachbarten Farben. Nicht gegen die Seite: gegen das, was direkt daneben liegt. Es ist das am wenigsten bekannte der Kontrast-Kriterien und dasjenige, das die meisten Ermessensentscheidungen erzwingt — weshalb es sein eigenes Kapitel in unserem Kontrast-Leitfaden verdient.

Welche UI-Teile brauchen 3:1-Kontrast?

Erfolgskriterium 1.4.11 zieht seine Grenze bei erkennen oder bedienen: alles, was ein Nutzer sehen muss, um zu wissen, dass ein Steuerelement existiert, was es ist und in welchem Zustand es sich befindet. In der Praxis:

• Eingabefeld-Rahmen — wenn sie die einzige sichtbare Begrenzung des Feldes sind. Wenn nichts anderes markiert, wo das Feld beginnt, übernimmt der Rahmen die Erkennung und schuldet 3:1.
• Bedeutungstragende Icons — der Papierkorb, der das Löschen-Symbol ist, die Lupe, die die Suche ist. Ein Icon mit einer sichtbaren Textbeschriftung daneben ist aus dem Schneider; die Beschriftung erkennt das Steuerelement.
• Fokusindikatoren. Der Ring oder Umriss, der zeigt, wo der Tastaturfokus liegt, muss auffindbar sein, und 3:1 ist seine Untergrenze.
• Steuerelement-Zustände — der visuelle Unterschied, der angehakt gegen nicht angehakt, ausgewählt gegen nicht ausgewählt, an gegen aus sagt.
• Diagramm-Elemente, die Bedeutung tragen — die Linie in einem Liniendiagramm, die Segmentgrenzen, die ein Leser unterscheiden muss, um die Daten zu lesen.

Was ist ausgenommen — und wo beginnt das Ermessen?

Drei Ausnahmen sind eindeutig: reine Dekoration (Trennlinien, Hintergrundmuster, ornamentale Verzierungen vermitteln nichts und schulden nichts), deaktivierte Steuerelemente und Komponenten, deren Aussehen der Browser selbst bestimmt (native Steuerelemente ohne eigenes Styling).

Die vierte ist der Punkt, an dem Checklisten eine echte Feinheit einebnen: redundante Erkennung. Das Kriterium verlangt, dass die Komponente erkennbar ist, nicht dass jedes einzelne visuelle Merkmal für sich besteht. Ein Eingabefeld mit einer sichtbaren Beschriftung darüber und einer Füllung, die sich von der Seite unterscheidet, kann erkennbar sein, selbst wenn sein blasser Rahmen 3:1 verfehlt — der Rahmen ist nicht länger das Einzige, das die Arbeit leistet. Das ist ein Feld für ehrliches Ermessen, kein Schlupfloch: Die Frage, die man stellen muss, ist, woran ein Nutzer das Feld tatsächlich lokalisiert und ob dieser Hinweis die Untergrenze überschreitet. Lautet die Antwort „der Rahmen”, dann schuldet der Rahmen 3:1.

Was bedeutet „gegen benachbarte Farben”?

Komponenten werden gegen das gemessen, was direkt neben ihnen liegt, nicht gegen eine globale Seitenfarbe. Ein weißes Eingabefeld auf einer hellgrauen Karte misst seinen Rahmen außen gegen die Karte und innen gegen die weiße Füllung — die Seite hinter der Karte spielt dabei nie eine Rolle. Das schneidet in beide Richtungen: Ein Rahmen, der auf der Seite besteht, kann auf einer getönten Karte durchfallen, und ein Füllungsunterschied, der in einem Kontext als Begrenzung zählt, verschwindet in einem anderen. Der intuitive Grund, warum die Untergrenze überhaupt existiert: Text lesen ist eine foveale Aufgabe aus der Nähe, aber ein Steuerelement zu finden geschieht mit einem Blick, in der Peripherie, wo schwache Kanten zuerst verschwinden. Eine Begrenzung muss es überstehen, überblickt zu werden, nicht nur betrachtet zu werden.

Wie schneidet ein echtes Eingabefeld ab?

Ein Eingabefeld auf einer weißen Seite, innerhalb einer hellgrauen Karte #F3F4F6 — jeder Wert berechnet:

Die Form des Ergebnisses ist typisch: Fokusring und Icon sind in Ordnung, der Platzhalter fällt als Text durch (ein eigenes Kriterium — Platzhalter ist nicht ausgenommen), und der modische Rahmen fällt überall durch, wo er gemessen wird. Der hellste Neutralton, der auf Weiß 3:1 erreicht, berechnet sich zu ≈#949494 — sichtbar dunkler als das, was der aktuelle Geschmack bevorzugt, und das ist die Design-Spannung in einer einzigen Zahl.

Öffne die Anatomie dieses Eingabefeldes in Scale Composer — die Rahmen-, Fokus- und Zustands-Rollen, die eine Oberfläche ableitet, jede bei der Ableitung gegen die 3:1-Untergrenze geprüft, mit durchfallenden Teilen markiert gegen ihre benachbarten Farben.

Können Rahmen dezent bleiben und trotzdem bestehen?

Die Spannung ist real: Haarlinien-Rahmen sind gerade in Mode, und ein 3:1-Rahmen ist unverkennbar sichtbar. Drei Lösungen halten stand:

• Gib die 3:1 nur dort aus, wo der Rahmen die einzige Begrenzung ist. Eingabefelder bekommen den sichtbaren Rahmen; rein dekorative Karten-Umrisse dürfen blass bleiben, weil Dekoration ausgenommen ist.
• Lass stattdessen den Hintergrundunterschied die Begrenzung sein. Ein gefülltes Feld auf einem kontrastierenden Grund kann sich durch seine Füllung zu erkennen geben — aber dann ist es der Füllungsunterschied, der 3:1 schuldet, und die meisten dezenten Tönungen bleiben weit darunter, wie die Zeile ≈1,1:1 oben zeigt.
• Halte den Fokuszustand in voller Stärke. Welche Dezenz der Ruhezustand auch erkauft — der Fokusindikator ist der eine Moment, in dem die Begrenzung aktiv gesucht wird; die Ersparnis dort auszugeben, macht den Zweck zunichte.

Auch hier zahlt sich die Ableitung aus: Der Rollen-Satz von Scale Composer umfasst border, borderSubtle, focus und Zustands-Rollen, wobei die 3:1-Untergrenze dort angewandt wird, wo die Aufgabe der Rolle es verlangt — ein dezenter Rahmen existiert als eigene Rolle genau deshalb, damit der tragende Rahmen nicht heimlich zu ihm aufgehellt wird.

Führe einen Rahmen bis zur Untergrenze

Der Unterschied zwischen 1,5:1 und 3:1 lässt sich leichter fühlen als nachlesen. Nimm die Rahmen-Rolle und führe ihre Helligkeit in Richtung Untergrenze — beobachte, wie das Verhältnis gegen Füllung und Karte steigt, während das Grau dunkler wird, sieh, wo 3:1 visuell landet, und beurteile selbst, wie viel Dezenz ein Rahmen überlebt, den ein Nutzer tatsächlich finden kann.