Link nur durch Farbe erkennbar (link-in-text-block)

Die Regel link-in-text-block meldet Links im Fließtext, die sich vom umgebenden Text nur durch ihre Farbe abheben – und nicht einmal deutlich genug. Wer die beiden Farben nicht unterscheiden kann, findet den Link nicht. Die einfachste Lösung ist die älteste: Links im Text unterstreichen.

Was die Regel bedeutet

WCAG 1.4.1 verlangt, dass Farbe nicht das einzige visuelle Mittel ist, um eine Information zu vermitteln – und „dieses Wort ist ein Link“ ist eine Information. Die Regel betrachtet nur Links innerhalb eines Textblocks, etwa eines Absatzes. Navigationsmenüs, Buttons und Links in einer eigenen Zeile prüft sie nicht.

axe lässt einen solchen Link bestehen, wenn eines davon zutrifft:

• der Link hat eine Auszeichnung außer Farbe, die der umgebende Text nicht hat – Unterstreichung, Rahmen, andere Schriftstärke, -art, -größe oder -familie oder ein Hintergrundbild;
• die Linkfarbe hat einen Kontrast von mindestens 3:1 zur Textfarbe (oder die Hintergründe unterscheiden sich um 3:1).

Sonst ist es ein Verstoß. Kann axe die Farben nicht bestimmen – Text auf einem Verlauf oder Bild, ein Link mit Inhalt über ::before/::after –, bleibt das Ergebnis offen, und ein Mensch muss hinsehen.

Zwei Grenzen sollten Sie kennen. Die WCAG-Technik für den 3:1-Weg (G183) verlangt zusätzlich ein sichtbares Signal bei Hover und Fokus; axe prüft nur den Ruhezustand. Und ein Link, der genauso aussieht wie der Text um ihn herum, besteht – es gibt keinen Farbunterschied zu messen. Finden kann ihn trotzdem niemand.

Wen es betrifft

Menschen mit Farbsehschwäche, für die ein blauer Link und dunkelgrauer Text gleich aussehen können. Menschen mit Sehbehinderung und ältere Menschen mit nachlassendem Kontrastempfinden. Und alle, die am Smartphone in der Sonne oder an einem schlecht eingestellten Bildschirm lesen, wo ein feiner Farbunterschied verschwindet.

Warum die Prüfung anschlägt

• CSS-Resets, die allen Links die Unterstreichung nehmen (a { text-decoration: none; }) und nur eine Farbe zurückgeben.
• Markenfarben für Buttons und Überschriften, die im Fließtext für Links wiederverwendet werden und dort zu nah an der Textfarbe liegen.
• Dunkelgrauer Fließtext (#333, #444) mit mittelblauen Links – beide haben gegen Weiß genug Kontrast, untereinander aber nur etwa 2:1.
• Unterstreichung nur bei Hover – das hilft niemandem, der den Link noch nicht gefunden hat, und auf Touchscreens gar nicht.
• Editoren und CMS-Themes, deren Inhaltsstile die Unterstreichung „für einen ruhigeren Look“ entfernen.

So beheben Sie es

1. Unterstreichen Sie Links im Fließtext. Das braucht keine Farbrechnung, funktioniert in jedem Theme und entspricht der Erwartung.
2. Soll es ohne Unterstreichung gehen, braucht der Link eine Farbe mit mindestens 3:1 zum Text und 4,5:1 zum Hintergrund – plus Unterstreichung oder Rahmen bei Hover und Fokus.
3. Beheben Sie es im Basis-Stylesheet für Inhalte (.prose a, .inhalt a), nicht Link für Link.

/* Vorher – der Link hebt sich nur durch Farbe ab */
.einleitung   { color: #333333; background: #ffffff; }
.einleitung a { color: #1a5fb4; text-decoration: none; } /* etwa 2:1 zum Text */

/* Nachher – eine Unterstreichung, Farbe ist nicht mehr das einzige Signal */
.einleitung   { color: #333333; background: #ffffff; }
.einleitung a { color: #1a5fb4; text-decoration: underline; text-underline-offset: 0.15em; }

Wer die Unterstreichung trotzdem entfernt, bringt sie dort zurück, wo sie am meisten zählt:

.einleitung a:hover, .einleitung a:focus-visible { text-decoration: underline; }

So prüfen Sie es von Hand

1. Lesen Sie eine textreiche Seite und fragen Sie sich: Sehe ich jeden Link, ohne mit der Maus darüberzufahren?
2. Schalten Sie die Seite auf Graustufen – in den Entwicklertools von Chrome oder Edge unter „Rendering“ mit der Emulation „Achromatopsie“. Links, die im Text verschwinden, fallen durch.
3. Wo keine Unterstreichung ist, messen Sie Linkfarbe gegen Textfarbe mit dem kostenlosen Colour Contrast Analyser: mindestens 3:1.
4. Gehen Sie mit Tab durch den Text und fahren Sie über jeden Link: Ändert sich außer der Farbe etwas – Unterstreichung oder Rahmen?

Zugehöriges WCAG-Kriterium

1.4.1 Benutzung von Farbe, Stufe A. Verwandt: 1.4.3 Kontrast (Minimum), das der Linktext selbst gegenüber seinem Hintergrund erfüllen muss, und 2.4.7 Fokus sichtbar für das Fokus-Signal an Links.

So meldet Reviseberg diese Regel

Reviseberg führt link-in-text-block auf jeder gecrawlten Seite bei 1280 px aus. Die Befundliste zeigt die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen Links und Seiten und den Punkten, die ein Fix zurückbringt. Die Ursache ist fast immer eine Zeile in einem gemeinsamen Stylesheet – eine Änderung behebt dann alle Seiten. Im Detail sehen Sie den CSS-Selektor, den HTML-Ausschnitt und jede betroffene Seite.

Links, deren Farben axe nicht bestimmen kann, landen in der Warteschlange „Mögliche Probleme“. Dort entscheidet ein Mensch; als bestanden zählen sie nicht. Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert. Weil nur ein Mensch den Einsatz von Farbe ganz beurteilen kann, bleibt 1.4.1 ohne Befunde in der WCAG-Übersicht „ungeprüft“ (untested), bis jemand ein manuelles Ergebnis erfasst – ein sauberer Lauf dieser Regel ist kein Bestehen.

Verwandte Regeln

• undefined – Text, auch Linktext, gegenüber seinem Hintergrund.
• undefined – Links ganz ohne zugänglichen Text.
• undefined – Links und Bedienelemente ohne sichtbaren Fokus.

Links, die nur farbig markiert sind, auf Ihrer Website finden – kostenloser Scan