← Alle Regeln

Farbe und Kontrast

Links im Fließtext brauchen mehr als Farbe

• Regel: link-in-text-block
• Schweregrad: Schwerwiegend
• WCAG-Stufe A

Warum das wichtig ist

Etwa jeder zwölfte Mann hat eine Farbsehschwäche. Unterscheidet sich ein Link im Absatz nur durch die Farbe vom Text, ist er für ihn unsichtbar.

So beheben Sie es

1. Unterstreichen Sie Links im Fließtext, zumindest im Standardzustand.
2. Oder heben Sie den Kontrast zwischen Link und umgebendem Text auf 3:1 an und ergänzen Sie bei Hover und Fokus einen Hinweis, der nicht auf Farbe beruht.
3. Der gewählte Hinweis muss ohne Hover sichtbar sein — auf Touchgeräten gibt es kein Hover.

Im Markup

a { color: #4a7dff; text-decoration: none; } /* colour only */

a { color: #4a7dff; text-decoration: underline; }

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.1 Benutzung von Farbe (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu link-in-text-block (ö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.