Was die Norm sagt
Die visuelle Darstellung des Folgenden hat ein Kontrastverhältnis von mindestens 3:1 gegenüber den angrenzenden Farben:
Warum das zählt
Ein Formularfeld, dessen Rand man nicht sieht, ist ein Formularfeld, das man nicht findet. Hier überschreitet minimalistisches Design am häufigsten die Grenze.
Wie ein Fehlschlag aussieht
- fällt durchFeldränder in #e5e5e5 auf Weiß — etwa 1,2:1.
- fällt durchEin Fokusrahmen in einer Farbe nahe am Hintergrund.
- fällt durchDiagrammlinien, die sich nur durch blasse Tönungen unterscheiden.
- fällt durchSchalter, deren Ein- und Aus-Zustand sich nur in einer kontrastarmen Füllung unterscheiden.
So beheben Sie es
- tunBringen Sie Ränder, Fokusrahmen und Icons auf mindestens 3:1 gegen das, was dahinterliegt.
- tunPrüfen Sie auch die Zustände, nicht nur den Normalfall: Hover, Fokus, angehakt, deaktiviert.
Wie A11ySignal es prüft
manuell
Keine automatische Regel kann über dieses Kriterium urteilen, und wir tun nicht so, als wäre es anders. Ein sauberer Scan heißt nicht, dass 1.4.11 erfüllt ist — er heißt, dass nichts fehlschlägt, was wir messen können. Hier braucht es einen Menschen.
Ebenfalls unter 1.4 Unterscheidbar
- 1.4.1 Verwendung von Farbe
- 1.4.2 Audio-Steuerelement
- 1.4.3 Kontrast (Minimum)
- 1.4.4 Textgröße ändern
- 1.4.5 Bilder eines Textes
- 1.4.6 Kontrast (erhöht)
- 1.4.7 Leise oder kein Hintergrundaudio
- 1.4.8 Visuelle Darstellung
- 1.4.9 Bilder eines Textes (keine Ausnahme)
- 1.4.10 Umbruch (Reflow)
- 1.4.12 Textabstand
- 1.4.13 Inhalt bei Hover oder Fokus