Linkfarbe: Warum #0000FF scheitert und welche 8 Linkfarben Sie stattdessen nutzen
Reines Blau ist die erste Linkfarbe, die jeder wählt, und die falsche: neben Fließtext und auf dunklen Screens. Unterstreichen, auf Dunkel aufhellen, besuchte Links zeigen, den Fokusring behalten. Acht Codes inklusive.
Die richtige Linkfarbe ist ein etwas weicheres Blau, das Sie zusätzlich unterstreichen, nicht #0000FF allein. Reines Blau ist die erste Linkfarbe, die jeder wählt, und sie scheitert an zwei Stellen: neben schwarzem Fließtext und auf dunklen Screens. Hier sind die vier Fixes und die acht Farben, die Sie Ihrer Entwicklerin oder Ihrem Entwickler geben.
Warum #0000FF scheitert
Niemand entscheidet sich für #0000FF. Es passiert einfach. Es ist das Keyword blue in CSS und das erste gesättigte Blau in jedem Farbwähler.
Browser liefern selbst einen leicht anderen Standard aus: #0000EE für einen Link und #551A8B für einen besuchten, und beide sind unterstrichen. Die Unterstreichung gehört zum ursprünglichen Deal. Designer entfernen sie, damit es sauber aussieht, und behalten das Blau.
Dann muss das Blau den Job allein machen. Reines Blau ist sehr dunkel. In einem Absatz mit fast schwarzem Text sehen beide für Menschen mit Schwierigkeiten bei der Farbunterscheidung fast gleich aus. Auf einem dunklen Screen ist es noch schlimmer: #0000FF versinkt im Hintergrund.
Ein Link besteht aus drei Dingen: einer Farbe, einer Linie und einem Zustand.
Fix 1: Unterstreichen
Nur Farbe
Unterstrichen
Die Regel dahinter ist WCAG 1.4.1, Verwendung von Farbe.
Ein Link, der nur durch Farbe markiert ist, muss sich deutlich vom umgebenden Text abheben. Reines Blau neben reinem Schwarz tut das nicht, #0F62FE neben #161616, der Textfarbe, die wir hier verwenden, schon. Eine Unterstreichung löst das Problem komplett, weil der Link dann nicht mehr von der Farbe abhängt.
Unterstreichen Sie Links im Fließtext. Navigationsleisten, Buttons und Karten sind anders: Ihre Position und Form sagen schon „klickbar“, eine Unterstreichung ist dort optional.
Nur Farbe, Graustufen
Unterstrichen, Graustufen
Fix 2: Auf Dunkel aufhellen
#0000FF auf Dunkel
#78A9FF auf Dunkel
Das ist nicht knapp. #0000FF auf #161616 ist in Fließtextgröße zu dunkel zum Lesen, und #78A9FF auf demselben Hintergrund liest sich mühelos. Die gesättigten Farben, die auf Weiß funktionieren, werden auf Dunkel heller und weicher, derselbe Move wie bei Fehlerfarben.
Halten Sie zwei Blautöne bereit und wechseln Sie sie mit dem Theme: #0F62FE auf hellen Screens, #78A9FF auf dunklen. Hover geht einen Schritt weiter: #0043CE auf Hell, #A6C8FF auf Dunkel.
Fix 3: Zeigen, wo man schon war
Jeder Link wirkt neu
Besucht wird lila
Die Nielsen Norman Group vertritt das seit 2004: Menschen verlaufen sich und drehen Kreise, wenn besuchte und neue Links dieselbe Farbe haben. Lila ist die Konvention, und Browser nutzen sie seit Anbeginn. Verwenden Sie #8A3FFC auf hellen Screens und #BE95FF auf dunklen. Es kostet eine CSS-Regel: a:visited.
Fix 4: Den Fokusring behalten
outline: none
2px-Ring in #0F62FE
Tastaturnutzer, Switch-Nutzer und jeder, dessen Mausarm müde ist, sind auf den Fokusring angewiesen.
Ihn mit outline: none zu entfernen und nichts an seine Stelle zu setzen, verletzt WCAG 2.4.7, Fokus sichtbar. Wenn der Standardring des Browsers mit Ihrem Design kollidiert, ersetzen Sie ihn. Löschen Sie ihn nicht.
Ein 2px-Ring in der Linkfarbe mit kleinem Abstand ist die sichere Variante. WCAG 2.2 beschreibt die stärkste Form als Umrandung von mindestens 2 CSS-Pixeln.
Die 8 Linkfarben, hell und dunkel
Tippen Sie auf einen Chip, um den Code zu kopieren.
| Rolle | Hell | Dunkel | Verwendung |
|---|---|---|---|
| Text | #161616 | #F4F4F4 | Fließtext um den Link |
| Link | #0F62FE | #78A9FF | Jeder Link im Ruhezustand |
| Hover | #0043CE | #A6C8FF | Zeiger über dem Link |
| Besucht | #8A3FFC | #BE95FF | Bereits geöffnete Links |
Das sind die Link-Tokens von IBM Carbon, abgelesen aus den veröffentlichten Theme-Werten.
Das geben Sie Ihrem Entwickler
:root {
--color-text: #161616;
--color-link: #0F62FE;
--color-link-hover: #0043CE;
--color-link-visited: #8A3FFC;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #F4F4F4;
--color-link: #78A9FF;
--color-link-hover: #A6C8FF;
--color-link-visited: #BE95FF;
}
}
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
Die Reihenfolge zählt: :link, :visited, :hover, :focus, :active ist die klassische Abfolge, und eine Hover-Regel vor der Visited-Regel gewinnt bei einem besuchten Link nie. Der Selektor :focus-visible zeigt den Ring für Tastaturnutzer und überspringt ihn bei Mausklicks, also hat niemand einen Grund, ihn zu entfernen.
Die Zahlen hinter „gut lesbar“
| Paar | Kontrast |
|---|---|
| #0000FF auf Weiß | 8,6 zu 1, besteht, ist aber trotzdem zu nah am schwarzen Text |
| #0000FF auf #161616 | 2,1 zu 1, fällt durch |
| #0F62FE auf Weiß | 5,0 zu 1 |
| #0043CE auf Weiß | 7,8 zu 1 |
| #8A3FFC auf Weiß | 5,0 zu 1 |
| #78A9FF auf #161616 | 7,7 zu 1 |
| #A6C8FF auf #161616 | 10,6 zu 1 |
| #BE95FF auf #161616 | 7,7 zu 1 |
Die erste Zeile zeigt, warum ein Checker nicht reicht. Reines Blau auf Weiß besteht nach Zahlen. Es fällt beim echten Test durch: ob ein Link anders aussieht als der schwarze Text daneben.
FAQ
Welche Farbe sollten Links haben?
Ein mittleres Blau wie #0F62FE auf hellen Hintergründen und ein helleres Blau wie #78A9FF auf dunklen, im Fließtext mit Unterstreichung.
Ist #0000FF eine gute Linkfarbe?
Nicht allein. Auf Weiß liest es sich gut, aber es liegt für Menschen, die das Blau nicht sehen können, zu nah am schwarzen Fließtext, und auf dunklen Hintergründen verschwindet es fast.
Sollten Links unterstrichen sein?
Ja, innerhalb von Absätzen. WCAG 1.4.1 sagt, dass Farbe allein einen Link nicht markieren darf, es sei denn, er hebt sich deutlich vom umgebenden Text ab, und eine Unterstreichung beseitigt diese Abhängigkeit.
Welche Farbe sollten besuchte Links haben?
Lila. Browser nutzen standardmäßig #551A8B, und Designsysteme wie IBM Carbon verwenden #8A3FFC auf hellen Screens und #BE95FF auf dunklen.
Welche Linkfarbe funktioniert im Dark Mode?
Ein helleres Blau. #78A9FF liest sich mühelos auf #161616, wo #0000FF in Fließtextgröße zu dunkel ist.
Darf ich den Fokusrahmen bei Links entfernen?
Nur, wenn Sie ihn durch eine andere sichtbare Anzeige ersetzen. Ihn ersatzlos zu entfernen verletzt WCAG 2.4.7, Fokus sichtbar.
Quellen
- HTML Living Standard, Rendering: Das Standard-Stylesheet setzt
:linkauf #0000EE,:visitedauf #551A8B und unterstreicht Links. #0000FF ist die benannte CSS-Farbeblue. - IBM Carbon color tokens, abgelesen aus @carbon/themes 11.40.0: link-primary #0F62FE, hover #0043CE, visited #8A3FFC im weißen Theme; #78A9FF, #A6C8FF, #BE95FF im g100-Theme.
- WCAG 2, 1.4.1 Use of Color und Technik G183.
- WCAG 2.4.7 Focus Visible und 2.4.13 Focus Appearance.
- Nielsen Norman Group, Change the Color of Visited Links (Jakob Nielsen, 2004).
- Kontrastverhältnisse berechnet mit der WCAG-Formel für relative Luminanz. Der Beispieltext ist für diese Seite erfunden.
- Zuerst veröffentlicht als Karussell auf UX Brainy.
Want links, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
