Accessible Link Colors in Body Text

Readable text and recognizable links

A link can have strong contrast against a white page while looking almost identical to the paragraph around it. These are two different problems: reading the words and finding the actionable words. A persistent underline makes the link identifiable without requiring users to distinguish blue from black.

If color and lightness alone distinguish an inline link, W3C Technique G183 describes at least 3:1 between that link and the surrounding static text. The link and surrounding text must still each meet their applicable text-to-background thresholds. G183 is a sufficient technique rather than the only design method; a consistent underline is often easier to recognize and maintain.

Measure the three pairs

For this example, black on white is 21:1. The blue #3366CC has approximately 5.37:1 against white and 3.91:1 against black. Those values illustrate the separate tests; they are not a universal link palette. Changing the body text to a softer gray changes the third ratio even though the page and link colors stay the same.

Compare the three colors in the palette matrix →

Use the matrix with three swatches named Body, Link and Surface. Read Body/Surface and Link/Surface for text contrast. Read Link/Body only for the separate distinction question. The matrix displays text categories, so interpret its raw ratio using the criterion that matches the relationship; a red normal-text cell is not a verdict on every possible use of that pair.

Use an underline that stays visible

.article a {
  color: #3366CC;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.article a:focus-visible {
  outline: 3px solid #10182B;
  outline-offset: 3px;
}

This starting example keeps the underline in the default state. An underline that appears only after hover is not available to someone trying to locate the link before interacting. Check touch use as well: a touch screen has no persistent hover state. Keep the purpose of the link clear in its visible words.

Check hover, focus and visited states

1. Measure each state’s text color against the actual background; include tinted callouts and dark surfaces.
2. Keep keyboard focus visible and check its indicator against the neighboring surface. A passing text ratio does not establish focus visibility.
3. If you style visited links, retain readable text contrast and the same persistent link cue.
4. Check wrapping links on a phone and at zoom: decoration and focus should remain understandable across lines.

Browsers restrict the information scripts can obtain about visited links for privacy. Do not build a color-review workflow that depends on reading a user’s browsing history. Review your authored visited styles and their expected surfaces directly.

Avoid fixing one link in isolation

A blue that works in a white article may fail in a tinted notification. Test the final computed colors rather than the token name “link-blue.” If a shared link token needs adjustment, review all surfaces that use it. The checker can hold a background fixed while suggesting alternatives, but it cannot prove that an entire stylesheet or navigation system is accessible.

Find a passing adjustment for one link and surface →