Accessibility für Links: Warum Farbe allein nicht reicht. Tipps für erkennbare, nutzbare Links. Aus meiner Reihe Barrierefreiheit auf der Website.
Links sind Wegweiser; sie führen Menschen durch Deine Inhalte, zeigen den nächsten sinnvollen Schritt und geben Orientierung. Wenn sie nicht klar als solche erkennbar sind, entstehen Barrieren – besonders für Menschen mit Sehbeeinträchtigungen, Farbsehschwächen oder kognitiven Einschränkungen. Gute Linkauszeichnung verbessert also Orientierung, Nutzbarkeit und Vertrauen.
Inhalt
Warum Farbe allein für die Barrierefreiheit nicht genügt
Ein gut gestalteter Link in Deinen Websitetexten sollte sich immer deutlich vom umgebenden Text abheben, ohne die Lesbarkeit zu beeinträchtigen. Farbe allein reicht reicht für die Kennzeichnung von Links nicht aus. Rund 8 % der Männer (und immerhin < 1 % der Frauen) sind farbenblind, also farbfehlsichtig. Wenn Links nur über eine andere Farbe hervorgehoben werden, gehen sie im Fließtext leicht unter.
Dazu kommt: Selbst eine kräftige Linkfarbe kann zum Hintergrund oder zur regulären Textfarbe einen zu geringen Kontrast haben und bleibt damit schwer erkennbar.
Die Lösung, um Links optisch barrierefrei zu machen
Farbe + Auszeichnung
Die beste Lösung ist daher eine Kombination aus Farbe und Unterstrich. Die Farbe macht den Link im Layout sichtbar und unterstützt Dein Branding, der Unterstrich stellt die Erkennbarkeit unabhängig von Farben sicher. Der Unterstrich ist dabei ein etabliertes, sofort verständliches Signal für „hier kannst Du klicken“. Wenn Du diese Kennzeichnung konsequent auf der gesamten Website einsetzt, erhöht das die Einheitlichkeit und verbessert die Usability spürbar.
Und nein, der Link muss dabei nicht knallblau sein 😉
In Elementor kannst Du in den globalen Website-Einstellungen unter Typographie die Linkfarbe sowie die Hoverfarbe (wenn man mit Maus über den Link fährt) passend zu Deinem Branding definieren sowie die automatische Auszeichnung mit Unterstrich (Auszeichnung > Unterstreichen) angeben. Sobald Du in Deinen Text einen Link einfügst, hebt er sich optisch ab.
Links via CSS sichtbar machen
Wenn Du nicht mit Elementor arbeitest, kannst Du den Link auch via CSS anpassen:
/* Grundzustand: klar erkennbarer Link */
a {
color: #0dbcba; /* Beispiel: markante, kontrastreiche Linkfarbe */
text-decoration: underline; /* Unterstrich standardmäßig */
text-underline-offset: 0.12em; /* etwas Abstand zur Grundlinie für bessere Lesbarkeit */
}
/* Hover & Fokus: eindeutiges Feedback */
a:hover,
a:focus {
color: #ee2996; /* gut unterscheidbare Interaktionsfarbe */
text-decoration-thickness: 2px; /* stärkerer Unterstrich bei Interaktion */
}
/* Tastaturfokus zusätzlich sichtbar machen */
a:focus-visible {
outline: 2px solid #ee2996;
outline-offset: 2px;
}Der Hover-Effekt gibt Deinen Websitebesucher:innen visuelles Feedback und bestätigt ihnen, dass sie mit einem interaktiven Element interagiert. Der dickere Unterstrich verstärkt dieses Signal zusätzlich.
Eine Fokuskennzeichnung, die sich klar vom Hover unterscheidet ist wichtig für Menschen, die per Tastatur navigieren. Der text-underline-offset sorgt dafür, dass der Unterstrich nicht die Buchstaben berührt und erhöht damit die Lesbarkeit.
Weiter Tipps für barrierefreie Links
Kontraste korrekt prüfen
Damit Links wirklich auffallen, braucht es ausreichende Kontraste – sowohl zum Hintergrund als auch gegenüber des normalen Fließtextes.
Mindestwerte (WCAG 2.2):
- Textkontrast (normaler Text): Verhältnis mindestens 4.5:1.
- Großer Text (ab 18pt normal oder 14pt fett): Mindestens 3:1.
- Link vs. Fließtext: Wenn Du Links zusätzlich unterstreichst, reicht es, wenn der Linktext zum Hintergrund die Mindestkontraste erfüllt. Ohne Unterstrich müsste sich der Link farblich deutlich vom umliegenden Text abheben (Kontrast Linkfarbe vs. Textfarbe ≥ 3:1) – deshalb: Nimm den Unterstrich dazu.
Hier kannst prüfen, ob Du Deine Kontraste die Mindestwerte erreichen: Colour Contrast Checker
Gestaltungstipps für klare, barrierefreie Links
- Lass den Unterstrich in normalen Textabsätzen dran. Ausnahme: In Navigationsleisten oder bei klar als Buttons gestalteten Elementen brauchst Du keinen Unterstrich, weil die Gestaltung schon zeigt: „Hier kannst Du klicken“.
- Mach Links nicht nur fett oder kursiv. Viele erkennen das nicht zuverlässig als Link, und für Screenreader ist das kein klares Signal. Ein unterstrichener Link ist eindeutig.
- Achte darauf, dass der Unterstrich nicht direkt an den Buchstaben klebt. Ein kleiner Abstand macht den Text besser lesbar. Moderne Browser können den Strich außerdem elegant um Buchstabenformen herumführen, sodass er nicht „durchs i-Pünktchen“ läuft.
- Beim Überfahren mit der Maus oder beim Anwählen mit der Tastatur sollte sich mehr ändern als nur die Farbe. Zum Beispiel: Ein etwas dickerer Unterstrich, ein leichter Hintergrund, oder eine deutlich sichtbare Umrandung. So merken alle sofort: „Hier passiert etwas“.
- Optional: Überlege, besuchte Links in einer anderen Farbe zu zeigen. Gerade in längeren Artikeln hilft das, bereits geöffnete Seiten wiederzuerkennen und sich schneller zu orientieren.
Linktexte, die Sinn ergeben
- Verwende klare, beschreibende Linktexte statt „hier klicken“. Schreib z. B. „Leitfaden als PDF herunterladen“ statt „hier“. So wissen alle sofort, was sie erwartet.
- Formuliere den Link so, dass er auch ohne den umgebenden Satz Sinn ergibt. Viele Menschen mit Screenreader lassen sich nur die Linkliste vorlesen. Ein Link wie „Preisliste 2025“ ist dann verständlich, „mehr dazu“ nicht.
- Halte Linktexte kurz und präzise. Vermeide lange, ganze Sätze als Link. Besser: wenige, treffende Wörter, die Ziel und Nutzen benennen (z. B. „Workshoptermine“ statt „Hier findest Du eine Übersicht unserer kommenden Workshop-Termine“).
Accessibility für Links – Checkliste zum Abhaken
- ✅ Link im Fließtext unterstrichen
- ✅ Kontrast Linkfarbe zu Hintergrund ≥ 4.5:1 (bei normalem Text)
- ✅ Hover und Fokus klar sichtbar (Farbe + Linie/Outline)
- ✅ Fokus auch per Tastatur sichtbar (focus-visible)
- ✅ Linktexte sind aussagekräftig
- *️⃣ Besuchte Links sinnvoll differenziert
Fazit
Mach es Deinen Nutzer:innen leicht: Unterstrich + ausreichender Kontrast + klares Interaktionsfeedback. So sind Links sofort als solche erkennbar; unabhängig von Gerät, Umgebung oder Sehvermögen und Deine Inhalte werden für alle besser nutzbar.
Weitere Beiträge rund um Accessibility & Barrierefreiheit auf Deiner Website
