Link Color: Why #0000FF Fails and the 8 Link Colors to Use Instead

The right link color is a slightly softer blue that you also underline, not #0000FF on its own. Pure blue is the first link color everyone picks, and it fails in two places: next to black body text, and on dark screens. Here are the four fixes and the eight colors to hand your developer.

Why #0000FF fails

Nobody decides to use #0000FF. It arrives. It is the blue keyword in CSS and the first saturated blue in every color picker.

Browsers themselves ship a slightly different default, #0000EE for a link and #551A8B for a visited one, and they underline both. The underline is part of the original deal. Designers remove it to look clean and keep the blue.

Then the blue has to do the job alone. Pure blue is very dark. Set it inside a paragraph of near-black text and the two read almost the same to anyone who has trouble telling colors apart. On a dark screen it is worse: #0000FF sinks into the background.

A link is three things: a color, a line and a state.

Fix 1: underline it

Color only

Underlined

Same sentence, same link. On the left the only clue is a blue that is close to the surrounding black. On the right the underline makes the link findable at a glance, and the softer #0F62FE is easier on the eye than #0000FF.

The rule behind this is WCAG 1.4.1, use of color.

A link marked by color alone has to stand out clearly from the text around it. Pure blue next to pure black does not, and #0F62FE next to #161616, the text color we use here, does. An underline removes the problem entirely, because the link no longer depends on color.

Underline links inside running text. Navigation bars, buttons and cards are different: their position and shape already say "clickable", so an underline there is optional.

Color only, grayscale

Underlined, grayscale

A quick test: turn your screen to grayscale. Without color, the left paragraph has no link in it. The right one still does.

Fix 2: lighten it on dark

#0000FF on dark

#78A9FF on dark

Both links are underlined here, and the pure blue is still hard to read. Dark screens need a lighter blue.

It is not close. #0000FF on #161616 is too dark to read at body size, and #78A9FF on the same background reads easily. The saturated colors that work on white get lighter and softer on dark, the same move we make for error colors.

Keep two blues and switch them with the theme: #0F62FE on light screens, #78A9FF on dark ones. Hover gets one step further along: #0043CE on light, #A6C8FF on dark.

Fix 3: show where people have been

Every link looks new

Visited turns purple

A list of articles is also a map of what you have already read. When visited and new links look the same, people open the same page twice and lose track of the rest.

Nielsen Norman Group has argued this since 2004: people get lost and move in circles when visited and new links share one color. Purple is the convention, and browsers have used it since the beginning. Use #8A3FFC on light screens and #BE95FF on dark ones. It costs one CSS rule: a:visited.

Fix 4: keep the focus ring

outline: none

2px #0F62FE ring

Someone pressing Tab through this page needs to see where they are. On the left the focus is somewhere, and nobody can tell where.

Keyboard users, switch users and anyone whose mouse hand is tired depend on the focus ring.

Removing it with outline: none and putting nothing in its place fails WCAG 2.4.7, focus visible. If the default browser ring clashes with your design, replace it. Do not delete it.

A 2px ring in the link color, with a small offset, is the safe version. WCAG 2.2 describes the strongest form as a perimeter of at least 2 CSS pixels.

The 8 link colors, light and dark

Tap any chip to copy its code.

These are IBM Carbon's link tokens, read from its published theme values.

Hand this to your developer

Order matters: :link, :visited, :hover, :focus, :active is the classic sequence, and a hover rule placed before the visited rule never wins on a visited link. The :focus-visible selector shows the ring for keyboard users and skips it for mouse clicks, so nobody has a reason to remove it.

The numbers behind "easy to read"

The first row is why a checker is not enough. Pure blue on white passes by the number. It fails the real test, which is whether a link looks different from the black text next to it.

FAQ

What color should links be?

A medium blue such as #0F62FE on light backgrounds and a lighter blue such as #78A9FF on dark ones, with an underline in body text.

Is #0000FF a good link color?

Not on its own. It reads fine on white, but it is too close to black body text for people who cannot see the blue, and on dark backgrounds it almost disappears.

Should links be underlined?

Yes, inside paragraphs. WCAG 1.4.1 says color alone cannot mark a link unless it clearly stands out from the surrounding text, and an underline removes that dependence.

What color should visited links be?

Purple. Browsers default to #551A8B, and design systems such as IBM Carbon use #8A3FFC on light screens and #BE95FF on dark ones.

What link color works in dark mode?

A lighter blue. #78A9FF reads easily on #161616, where #0000FF is too dark to read at body size.

Can I remove the focus outline on links?

Only if you replace it with another visible indicator. Removing it with nothing in its place fails WCAG 2.4.7, focus visible.

Sources

• HTML Living Standard, Rendering: the default style sheet sets :link to #0000EE, :visited to #551A8B and underlines links. #0000FF is the CSS named color blue.
• IBM Carbon color tokens, read from @carbon/themes 11.40.0: link-primary #0F62FE, hover #0043CE, visited #8A3FFC on the white theme; #78A9FF, #A6C8FF, #BE95FF on the g100 theme.
• WCAG 2, 1.4.1 Use of Color and technique G183.
• WCAG 2.4.7 Focus Visible and 2.4.13 Focus Appearance.
• Nielsen Norman Group, Change the Color of Visited Links (Jakob Nielsen, 2004).
• Contrast ratios computed with the WCAG relative luminance formula. The sample text is invented for this page.
• First published as a carousel on UX Brainy.