A: Links müssen vom umgebenden Text unterscheidbar sein (WCAG 1.4.1)

Das bedeutet

Links innerhalb von Textabsätzen dürfen nicht allein durch ihre Farbe erkennbar sein. Sie müssen sich zusätzlich visuell abheben, zum Beispiel durch eine Unterstreichung, ein Symbol oder eine deutliche Formatierung. Nur so können Nutzer und Nutzerinnen mit eingeschränktem Sehvermögen oder Farbsehschwächen Links sicher identifizieren.

Auswirkung

Wenn Links ausschließlich durch Farbe gekennzeichnet sind, können viele Menschen sie nicht vom normalen Text unterscheiden. Das führt zu Orientierungsschwierigkeiten, verringert die Nutzbarkeit und verstößt gegen WCAG 1.4.1 (A) Benutzung von Farbe. Besonders betroffen sind Nutzerinnen und Nutzer mit Farbenblindheit oder Kontrastproblemen.

Empfehlung

• Links sollten sich nicht nur farblich, sondern auch stilistisch vom Fließtext unterscheiden.

• Verwenden Sie eine dauerhafte Unterstreichung oder ein zusätzliches Symbol (z. B. ein Pfeil oder Icon).

• Entfernen Sie Unterstreichungen nicht durch CSS (z. B. text-decoration: none;).

• Wenn Sie auf Farbe setzen, achten Sie auf einen Kontrast von mindestens 3:1 zwischen Link und Textfarbe und eine zusätzliche Hervorhebung bei Hover oder Fokus.

Beispiele

Problematisch:

Der Link ist nur farblich abgesetzt. Nutzerinnen und Nutzer mit Farbsehschwäche erkennen keinen Unterschied.

Besser:

Der Link ist zusätzlich unterstrichen und bleibt so auch für Menschen mit eingeschränktem Farbsehen erkennbar.

Alternativ:

Ein Symbol oder Icon kann die visuelle Erkennbarkeit ebenfalls verbessern.

Hinweis

Barrierefreiheit bedeutet hier nicht nur sichtbaren Kontrast, sondern Redundanz der Information: Farbe darf niemals das einzige Erkennungsmerkmal sein. Achten Sie auch auf Fokus- und Hoverzustände, um Links bei Tastaturbedienung hervorzuheben.

Verknüpftes WCAG-Kriterium:
WCAG 1.4.1 – Benutzung von Farbe
Zur offiziellen WCAG-Dokumentation →