Was die Norm sagt
Die visuelle Darstellung von Text und Bildern eines Textes hat ein Kontrastverhältnis von mindestens 4,5:1, außer in den folgenden Fällen:
Warum das zählt
Das ist der mit Abstand häufigste Fehlschlag im Web, auf mehr als vier von fünf Startseiten. Er trifft alle mit verringerter Kontrastempfindlichkeit, und das sind irgendwann die meisten Menschen über sechzig.
Wie ein Fehlschlag aussieht
- fällt durchGrauer Platzhalter- oder Hilfetext auf Weiß — das klassische #999 auf #fff sind 2,8:1.
- fällt durchWeißer Text auf einer Markenfarbe, die für ein Logo gewählt wurde und nicht für Fließtext.
- fällt durchText über einem Foto ohne abdunkelnde Fläche.
- fällt durchEin deaktivierter Zustand, so weit ausgeblichen, dass niemand liest, was deaktiviert ist.
So beheben Sie es
- tunMessen Sie, bevor Sie ausliefern. Großer Text heißt 18,66 px fett oder 24 px normal — alles andere braucht 4,5:1.
- tunDunkeln Sie eher den Text ab, als den Hintergrund aufzuhellen; das erhält den Entwurf meist besser.
- tunÜber Bildern eine deckende Abdunklung oder einen Textschatten, der selbst das Verhältnis erfüllt.
- tunBei deaktivierten Bedienelementen den Text lesbar halten und den Zustand in Worten anzeigen.
Wie A11ySignal es prüft
Bei jedem Scan läuft 1 automatische Prüfung gegen dieses Kriterium.
schwerwiegendcolor-contrastElemente müssen einen ausreichenden Farbkontrast haben.
Ebenfalls unter 1.4 Unterscheidbar
- 1.4.1 Verwendung von Farbe
- 1.4.2 Audio-Steuerelement
- 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.11 Nicht-Text-Kontrast
- 1.4.12 Textabstand
- 1.4.13 Inhalt bei Hover oder Fokus