Farbe und Kontrast

Text braucht genug Kontrast zum Hintergrund

Regel: color-contrast
Schweregrad: Schwerwiegend
WCAG-Stufe AA

Warum das wichtig ist

Kontrastarmer Text ist für Menschen mit eingeschränktem Sehvermögen unlesbar — genauso am Telefon in der Sonne oder auf einem günstigen Monitor. Das ist der mit Abstand häufigste Fehler im Web.

So beheben Sie es

Bringen Sie normalen Text auf mindestens 4,5:1 zum Hintergrund, großen Text (24px oder 19px fett) auf 3:1.
Dunkeln Sie eher den Text ab, als den Hintergrund aufzuhellen, wenn die Markenfarben feststehen.
Prüfen Sie auch die Zustandsfarben: Platzhalter, „deaktiviert aussehend, aber aktiv“ und Text über Bildern.

Im Markup

Fehlerhaft

.note { color: #9a9a9a; background: #ffffff; } /* 2.6:1 */

Korrekt

.note { color: #595959; background: #ffffff; } /* 7:1 */

Was die Prüfung nicht beurteilen kann

Die Engine überspringt Text, den sie nicht messen kann: über Verläufen, über Bildern oder mit teiltransparentem Hintergrund. Das braucht ein menschliches Auge.

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

1.4.3 Kontrast (Minimum) (öffnet in neuem Tab) — WCAG-Stufe AA

Weiterführende Quellen

Deque University zu color-contrast (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.