Stufe AA · WCAG 2.1
1.4.11 Nicht-Text-Kontrast
Die Teile eines Bedienelements, die es erkennbar machen — Rahmen, Icons, Fokusringe, Diagrammlinien — brauchen 3:1 Kontrast zur Umgebung.
Teilweise automatisch Manche Verstöße sind erkennbar, der Rest braucht Bewertung.
Woran es in der Praxis scheitert
Ein Eingabefeld mit 1,4:1 grauem Rahmen, das auf der Karte dahinter unsichtbar ist. Ein Schalter, dessen „Aus“-Zustand eine blasse Spur auf Weiß ist.
Wie man es repariert
Behandeln Sie Rahmen von Bedienelementen als Inhalt, nicht als Zierde. Wenn das Element ohne Rahmen unauffindbar wäre, muss der Rahmen 3:1 erreichen.
Auf einen Blick
- Stufe
- Stufe AA — die Stufe, die EN 301 549 verlangt, und damit die, an der BFSG und EAA gemessen werden.
- Prinzip
- Wahrnehmbar
- Richtlinie
- 1.4 Unterscheidbar
- Neu in
- WCAG 2.1
- EN 301 549
- 9.1.4.11
- Englische Bezeichnung
- Non-text Contrast
- Automatische Prüfung
- Teilweise automatisch
So prüfen Sie es von Hand
- Suchen Sie jedes Bedienelement, das man an seiner Form statt an seinem Text erkennt: Rahmen von Eingabefeldern, Checkboxen, Radiobuttons, Schalter, Icon-Buttons – und die Fokusanzeige.
- Messen Sie die Farbe, die das Element erkennbar macht, gegen die Farbe daneben. Nötig sind 3:1; ein Textfeld, dessen einzige Begrenzung ein blassgrauer Rahmen ist, ist der klassische Fehler.
- Dasselbe gilt für Grafiken, die etwas bedeuten: die Linien und Segmente eines Diagramms, ein Icon, das die einzige Beschriftung ist.
- Prüfen Sie jeden Zustand: an- und abgehakt, ein und aus, Fokus, Hover und Fehler.
Im Code
/* 1,54:1 – das Feld verschwindet auf Weiß */
.input { border: 1px solid #d0d0d0; }
/* 1,36:1 */
.toggle[aria-checked="false"] { background: #dddddd; }/* 3,45:1 */
.input { border: 1px solid #8a8a8a; }
/* 3,45:1 */
.toggle[aria-checked="false"] { background: #8a8a8a; }Teilweise automatisch
Wie weit eine automatische Prüfung kommt
Ein Werkzeug findet hier einen Teil der Verstöße und sieht den Rest nicht. Ein sauberes automatisches Ergebnis heißt: die vorhandenen Prüfungen haben nichts gefunden — nicht, dass das Kriterium erfüllt ist. Genau diese Lücke lässt einen grünen Scan wie eine barrierefreie Website aussehen, und genau dort arbeiten der Tastatur-Agent, die Agenten in Entwicklung und ein Mensch weiter.
Verwandte Kriterien
Weitere Kriterien unter derselben Richtlinie.
Weiterlesen
-
Kontrast Checker
Kontrastverhältnis zweier Farben sofort prüfen: Text (1.4.3), Bedienelemente (1.4.11) und Links. Mit Vorschlag für die nächste Farbe, die besteht.
-
Nicht-Text-Kontrast
Bedienelemente, ihre Zustände und Grafiken, die man zum Verstehen braucht, müssen sich mit mindestens 3:1 von angrenzenden Farben abheben (WCAG 1.4.11, Stufe AA).
Finden Sie heraus, welche Kriterien Ihre Website verfehlt
Wir prüfen bis zu 100 Seiten gegen WCAG 2.2 AA, schicken den Tastatur-Agenten durch die Seite, die Sie benennen, und senden Ihnen den Bericht per E-Mail — einmal, kostenlos, ohne Bedingungen.