Choosing link colors that remain distinguishable

Separate readability from link identification

First determine whether the link text is readable on its background. Under WCAG 2.2 Success Criterion 1.4.3, ordinary text generally needs a contrast ratio of at least 4.5:1, while qualifying large text has a 3:1 threshold. That comparison does not tell readers which words are links. Success Criterion 1.4.1 also requires that color is not the only visual means used to convey information or distinguish an element. A persistent underline is a direct solution because it survives grayscale viewing and does not depend on a reader perceiving the chosen hue. Typography and placement can provide additional context, but ordinary inline links benefit from explicit decoration.

• Measure every link text color against the actual background, including cards, banners, table rows, and dark surfaces.
• Keep an underline or another persistent shape cue for links embedded in prose rather than revealing it only on hover.
• Do not use font color alone to distinguish a link from adjacent text that shares the same size and weight.
• Write meaningful link text so the accessible name describes the destination without relying on surrounding color.

Define a complete state matrix

Default, visited, hover, focus, and active are separate rendered states. Each foreground must remain readable against its background, and state changes should not remove the feature that identifies the text as a link. The visited state can help users recognize navigation history, but it should not become so faint that it fails text contrast. Hover feedback assists pointer users but cannot substitute for a keyboard focus indicator. Active feedback may be brief, yet it still should not cause text to disappear. Document the allowed color and decoration for every state, then test their combinations with surrounding components.

Implement color and decoration together

CSS should express the link as a combination of foreground color, text decoration, and focus treatment. The sample keeps the underline in the default and visited states, increases its thickness on hover, and adds a separate focus outline. Values are illustrative and must be retested on every supported background. The focus-visible selector targets keyboard-style focus presentation in supporting browsers, while native focus behavior should remain available as a fallback. Avoid outline: none unless an equally visible replacement is supplied. Keeping this code identical across localized documentation prevents accidental differences in the copied implementation.

a {
  color: #005FCC;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.18em;
}

a:visited {
  color: #6F42C1;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

a:focus-visible {
  outline: 3px solid #6D28D9;
  outline-offset: 3px;
}

Check contrast against both relevant neighbors

An inline link has a background behind it and surrounding text beside it. Text contrast addresses the first relationship. When an implementation intentionally uses color as the differentiator, W3C sufficient technique G183 describes a 3:1 contrast ratio between the link and surrounding text together with an additional visual cue on hover or focus. A persistent underline is simpler because it supplies a non-color distinction continuously; it does not remove the need for readable text against the background. Calculate ratios from the rendered sRGB colors, including the result of transparency. Never infer compliance from hue names such as blue or purple. G183 is a sufficient technique, not a mandatory implementation or the only way to satisfy the criterion.

• Calculate link-to-background contrast for default, visited, hover, focus, and active foreground colors.
• If color differentiates inline links, also evaluate the relationship with surrounding body text and consult the applicable technique.
• Treat underlines, outlines, icons, and other shapes as explicit cues instead of assuming users perceive a hue shift.
• Recompute colors after opacity, overlays, or blending because source tokens may not equal rendered pixels.
• Test links inside disabled-looking containers carefully; a real link must not visually masquerade as unavailable content.

Preserve focus and target semantics

A link should remain an anchor with a valid destination when it performs navigation. Native semantics provide keyboard operation, focus behavior, and information to assistive technology that a colored span does not. The visible focus indicator must be evaluated in each context, especially when a link sits inside a card, menu, or dark banner. An outline may touch more than one color, so examine all adjacent pixels. Focus should not be indicated by color change alone. Also avoid styling buttons as links when they trigger in-page actions; correct semantics reduce the number of visual exceptions and make behavior predictable.

Test content, states, and environments

Review links in paragraphs, navigation, cards, tables, alerts, footers, and error messages. Use keyboard navigation to inspect focus order and visibility, then visit several destinations to reveal the visited color. Increase browser zoom and check high-contrast or forced-colors modes where supported. Automated tests can verify token pairs and ensure underlines are not removed, but they cannot judge whether wording clearly describes a destination or whether a focus ring is obscured by overflow. Include long translated labels because wrapping can move underlines and outlines across backgrounds. Repeat the matrix whenever shared typography, surface, or link tokens change.

• Render inline, standalone, navigation, card, and table links on every surface permitted by the design system.
• Traverse each example with a keyboard and confirm that focus is visible without requiring pointer hover.
• Open destinations to expose visited styling and remeasure its contrast rather than testing only fresh browser state.
• Check zoom, wrapping, forced colors, and translated text before recording the link state matrix as approved.