Link-Kontrastprüfung

Link-Kontrast-Checker

Sorgen Sie dafür, dass Ihre Links gut sichtbar und klar unterscheidbar sind. Testen Sie Farben, Stile und Unterstreichungen für maximale Zugänglichkeit.

Textfarbe

Hintergrundfarbe

Inhalt gestalten

Link unterstreichen

Link fett markieren

Größerer Text

Linkfarbe

WCAG

AA: Bestanden AAA: Bestanden

Kontrastverhältnis

Link vs. Fließtext

8.42 Sehr gut

Link vs. Hintergrund

8.42 Very good

Text vs. Hintergrund

8.42 Very good

Die Navigation durch Online-Inhalte sollte einfach sein. Sicherzustellen, dass wichtige Links auffallen, hilft den Nutzern dabei, schneller das zu finden, was sie brauchen.

Ein zu geringer Kontrast kann dazu führen, dass wichtige Informationen schwer zu erkennen sind – das kann frustrierend sein. Links sollten immer klar sichtbar sein, egal ob im Text oder alleinstehend.

Brauchen Sie Hilfe? Sehen Sie sich unsere Best Practices für Link-Kontraste an, um Lesbarkeit und Zugänglichkeit zu verbessern.

Sehr guter Kontrast – empfohlen von Barrierefreiheits-Experten.

WCAG-Konformität für Links

Ein ausreichender Kontrast bei Links ist für die Lesbarkeit entscheidend. Berücksichtigen Sie sowohl die Abhebung vom Hintergrund als auch die visuelle Unterscheidung zum umgebenden Text.

Anforderungen an das Kontrastverhältnis

Alleinstehende Links – mindestens 4.5:1 zum Hintergrund

Links that appear on their own (e.g., navigation menus, buttons, or isolated links) must have at least a 4.5:1 contrast ratio against the background.
This ensures they are clearly visible even without additional styling like underlines or bold formatting.

Inline-Links – mindestens 3:1 zum umgebenden Text (wenn nur Farbe verwendet wird)

When links appear within a block of text and are only differentiated by color, the contrast ratio must be at least 3:1 against surrounding text to ensure readability for users with color vision deficiencies.
If links use bold styling in addition to color, the contrast requirement applies between the link and the background, not the surrounding text.
If links are underlined, they only need to be a different color from the surrounding text, without a specific contrast ratio requirement, as long as the text and background contrast requirements are met.

Kostenloser Barrierefreiheits-Check für Ihre Website

Prüfen Sie mehr als nur den Kontrast – scannen Sie Ihre Website direkt auf WCAG-Probleme.

Jetzt kostenlos scannen

Häufige Fehler beim Linkkontrast

Ein Link kann gut sichtbar erscheinen, aber ein zu geringer Kontrast erschwert die Wahrnehmung für sehbehinderte Nutzer. Das Minimum beträgt 4.5:1 zum Hintergrund, oder 3:1 zum Fließtext, wenn nur Farbe verwendet wird.
Fettdruck verbessert die Lesbarkeit, ersetzt aber nicht den erforderlichen Kontrast. Auch fetter Text muss sich deutlich genug vom Textumfeld abheben.
Eine Unterstreichung hilft, ist aber nicht immer ausreichend. Wenn nur Farbe den Unterschied ausmacht, sind zusätzliche visuelle Hinweise erforderlich.
Vermeiden Sie Kontrasteinbrüche bei Hover- oder Fokuszuständen. Auch während der Interaktion muss der Link gut sichtbar bleiben.
Designs, die bei Tageslicht gut lesbar sind, können in dunkler Umgebung versagen. Testen Sie Ihre Inhalte unter verschiedenen Lichtverhältnissen.

Danke für Ihr Feedback 😊

Das tabnav-Team freut sich über Ihr Feedback und arbeitet kontinuierlich an Verbesserungen.