- Stufe
- AA
- Seit
- WCAG 2.1
- Einträge
- 49 / 193
1.4.11 Nicht-Text-Kontrast
Die Teile eines Bedienelements oder einer Grafik, die man braucht, um es zu erkennen und zu verstehen, müssen sich mit mindestens 3:1 von den angrenzenden Farben abheben.
/ Was es verlangt
Text ist nicht das Einzige, was Besucher sehen müssen. Der Rahmen eines Eingabefelds, der Haken in einer Checkbox, der Ring, der den Tastaturfokus zeigt, eine Lupe, die für die Suche steht, und die Linien eines Diagramms tragen Information ohne einen einzigen Buchstaben. Verschwimmen sie mit dem Hintergrund, kann eine Person mit Sehbehinderung nicht erkennen, wo ein Feld ist, ob eine Option ausgewählt ist oder welche Linie im Diagramm zu welcher Datenreihe gehört.
Das Kriterium verlangt ein Kontrastverhältnis von mindestens 3:1 zu angrenzenden Farben für zweierlei: für die visuelle Information, die nötig ist, um ein Bedienelement und seine Zustände zu erkennen, und für die Teile einer Grafik, die zum Verständnis nötig sind. Ausgenommen sind inaktive Komponenten und Bedienelemente, deren Aussehen der Browser bestimmt und der Autor nicht verändert hat. Grafiken sind ausgenommen, wo eine bestimmte Darstellung wesentlich ist, etwa bei Logos, Flaggen, Fotos und Heatmaps. Für Text gilt stattdessen 1.4.3.
/ Woran Seiten scheitern
- Textfelder sind in einem blassen Grau wie #cccccc auf Weiß umrandet, was etwa 1,6:1 ergibt.
- Eine eigene Checkbox oder ein eigener Radiobutton zeigt den ausgewählten Zustand in einer Farbe, die sich kaum vom nicht ausgewählten unterscheidet.
- Der Fokusindikator wurde zu einer dünnen, blassen Linie umgestaltet, die gegenüber der umgebenden Fläche keine 3:1 erreicht.
- Icons, die ohne Textbeschriftung als Schaltflächen dienen, sind in einem hellen Farbton gezeichnet.
- Linien oder Segmente eines Diagramms liegen im Ton zu nah am Hintergrund oder aneinander, um sie zu unterscheiden.
/ So prüfen Sie es selbst
- Nehmen Sie die Rahmenfarbe jedes input, select und eigenen Bedienelements mit der Pipette in den Entwicklerwerkzeugen oder im Colour Contrast Analyser auf und vergleichen Sie sie mit der Farbe direkt daneben.
- Gehen Sie die Seite mit der Tabulatortaste durch und messen Sie den Fokusring gegen den Hintergrund, auf dem er gezeichnet wird.
- Schalten Sie Checkboxen, Radiobuttons, Schalter und Tabs ein und aus und messen Sie, was den ausgewählten Zustand kennzeichnet.
- Suchen Sie Icons, die allein ohne Text stehen, und messen Sie jedes Icon gegen seine Fläche.
- Messen Sie in Diagrammen jede Linie und jedes Segment gegen den Hintergrund und gegen die Nachbarn, sofern nicht Beschriftungen dieselbe Information tragen.
/ So beheben Sie es
- Setzen Sie border-color von input, select und textarea auf eine Farbe mit mindestens 3:1 zur Seite. Auf Weiß ist #949494 ungefähr das hellste Grau, das diesen Wert erreicht.
- Gestalten Sie den Fokuszustand mit outline, zum Beispiel outline: 2px solid in einer Farbe, die 3:1 erreicht, und ergänzen Sie outline-offset, damit der Ring Abstand zum Bedienelement hat.
- Zeichnen Sie den ausgewählten Zustand eigener Checkboxen und Schalter mit einer Füllung und einem Zeichen, die beide 3:1 zur Umgebung erreichen.
- Färben Sie Icons über fill oder stroke mit currentColor, in einem Elternelement, das bereits eine ausreichend kontrastreiche Farbe hat.
- Trennen Sie Diagrammsegmente durch einen Rand in der Hintergrundfarbe und beschriften Sie die Daten direkt.
/ Was unser Scanner prüft
Der Durchlauf auf der gerenderten Seite nimmt sichtbare, aktive Formularfelder, Schaltflächen und Elemente mit der Rolle button, checkbox oder switch. Zeichnet eines einen Rahmen, legt er die Farbe des oberen Rahmens über den Hintergrund dahinter und meldet alles unter 3:1. Bedienelemente auf einem Bild oder Verlauf werden übersprungen. Icons, Diagramme, Fokusringe und ausgewählte Zustände misst er nicht, und eine gefüllte Schaltfläche mit blassem Rahmen kann gemeldet werden.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Wrocław | city · PL | 24 | 2 |
| Gdańsk | city · PL | 18 | 2 |
| Lublin | city · PL | 10 | 17 |
| Koleje Mazowieckie | transport · PL | 7 | 17 |
| Las Vegas | city · US | 7 | 8 |
| Politechnika Wrocławska | education · PL | 7 | 17 |
| Szczecin | city · PL | 7 | 2 |
| Zielona Góra | city · PL | 7 | 7 |
| Opole | city · PL | 6 | 8 |
| Politechnika Śląska | education · PL | 6 | 2 |
| Bundesministerium des Innern | government · DE | 4 | 10 |
| Gdynia | city · PL | 4 | 7 |
| Baltimore | city · US | 3 | 7 |
| Bundesregierung | government · DE | 3 | 4 |
| Cook County | government · US | 3 | 13 |
| München | city · DE | 3 | 22 |
| Social Security Administration | government · US | 3 | - |
| State of Washington | government · US | 3 | 9 |
| Uniwersytet Mikołaja Kopernika | education · PL | 3 | 6 |
| Uniwersytet im. Adama Mickiewicza | education · PL | 3 | 12 |
| Austin | city · US | 2 | 20 |
| Bundesministerium für Bildung und Forschung | government · DE | 2 | 8 |
| Bydgoszcz | city · PL | 2 | 7 |
| Krajowa Administracja Skarbowa | government · PL | 2 | 5 |
| Ludwig-Maximilians-Universität München | education · DE | 2 | 13 |
| Państwowa Komisja Wyborcza | government · PL | 2 | 15 |
| Poznań | city · PL | 2 | 1 |
| Radom | city · PL | 2 | 2 |
| San Diego | city · US | 2 | 63 |
| Düsseldorf | city · DE | 1 | 9 |
| Elbląg | city · PL | 1 | 20 |
| Freie Universität Berlin | education · DE | 1 | 7 |
| Gliwice | city · PL | 1 | 13 |
| Główny Urząd Statystyczny | government · PL | 1 | 17 |
| Los Angeles County | government · US | 1 | 9 |
| Muzeum Narodowe w Warszawie | culture · PL | 1 | 11 |
| Nashville | city · US | 1 | 12 |
| New Orleans | city · US | 1 | 7 |
| PKP Intercity | transport · PL | 1 | 2 |
| Pacjent.gov.pl | health · PL | 1 | 9 |
| Phoenix | city · US | 1 | 1 |
| Prezydent RP | government · PL | 1 | 15 |
| Stuttgart | city · DE | 1 | 6 |
| Travis County | government · US | 1 | 37 |
| Tychy | city · PL | 1 | 20 |
| University of Texas at Austin | education · US | 1 | 21 |
| Uniwersytet Jagielloński | education · PL | 1 | 1 |
| Urząd Ochrony Danych Osobowych | government · PL | 1 | 6 |
| Warszawa | city · PL | 1 | 20 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Brauchen Rahmen von Eingabefeldern ein Kontrastverhältnis von 3:1?
Ja, wenn der Rahmen das ist, woran Besucher erkennen, dass dort ein Feld ist. Die Begrenzung eines Textfelds ist visuelle Information, die zum Erkennen des Bedienelements nötig ist, sie muss also 3:1 zur angrenzenden Farbe erreichen. Ein Feld, das auf andere Weise mit 3:1 erkennbar ist, etwa durch eine Füllung, die sich deutlich von der Seite abhebt, braucht nicht zusätzlich einen kontrastreichen Rahmen.
Gilt 1.4.11 für deaktivierte Schaltflächen und Standardelemente des Browsers?
In beiden Fällen nein. Das Kriterium nimmt inaktive Komponenten aus, eine deaktivierte Schaltfläche darf also blass sein. Es nimmt auch Komponenten aus, deren Aussehen der Browser bestimmt und der Autor nicht verändert hat, etwa eine ungestaltete Checkbox. Sobald ein Stylesheet das Aussehen eines Bedienelements ändert, müssen dessen Rahmen, Zustände und Fokusindikator 3:1 erreichen.
Müssen Icons Kontrastanforderungen erfüllen?
Ein Icon, das nötig ist, um den Inhalt zu verstehen oder ein Bedienelement zu benutzen, muss 3:1 zum Hintergrund erreichen. Das betrifft ein allein stehendes Such- oder Menü-Icon ebenso wie die Symbole in einer Diagrammlegende. Ein Icon neben einer Textbeschriftung, die dasselbe sagt, ist für das Verständnis nicht nötig, reine Dekoration ebenso wenig. Logos sind ausgenommen.