Links styles

Links connect users to other pages, resources, or sections. Despite their simplicity, they are often misstyled in modern design trends. Links that look like plain text get missed. Links that rely only on color are inaccessible. And links that resemble buttons confuse users.

Consistent link styling builds predictable interactions: users know what is clickable, what to expect, and how to navigate confidently.

Guidelines for effective and accessible link styling.

Make links visually distinct

Links must be clearly distinguishable from body text. Do not rely on color alone to indicate a link, as this creates accessibility issues for users with color vision deficiencies.

The most effective and widely recognized convention is to underline link text. Underlines provide a strong visual cue and remain visible regardless of color perception. If you choose not to use underlines, ensure that links have another persistent indicator (such as a distinct font style) that differentiates them from regular text.

References:

• WCAG 1.4.1: Use of color
• Guidelines for link styling – Nielsen Norman Group
• Links and hypertext – WebAIM

References:

• WCAG 1.4.3: Contrast minimum
• Links and hypertext – WebAIM

Provide clear hover and focus states

Links must have visible states for mouse and keyboard users. Hover/focus should reinforce interactivity, not remove indicators.

References:

• WCAG 2.4.7: Focus visible
• Inclusive components – Heydon Pickering

Use consistent styles across the system

All links should share the same base style. Contextual variations (navigation menus, footers) are acceptable but must remain consistent within their context.

References:

• Link usage – IBM Carbon Design System

Ensure adequate contrast

Links must meet contrast ratios against background and surrounding text (at least 4.5:1 for normal text).

References:

• WCAG 1.4.3: Contrast minimum
• Accessibility for everyone – Laura Kalbag

Frequent mistakes in link styling.

Styling links like plain text

Users may not recognize them as interactive, leading to missed navigation.

Relying only on color to indicate links

Fails accessibility standards and excludes users with color vision deficiencies.

Removing underline on hover

Removing indicators on interaction reduces clarity instead of reinforcing it.

Inconsistent link styles across the product

Breaks predictability and forces users to re-learn interactions.

Key takeaways for link styling.

• Links must always be visually distinct from body text.
• Inline links should be underlined or have an equally strong indicator.
• Provide clear hover and focus states for accessibility.
• Ensure links meet color contrast requirements.
• Keep link styling consistent across contexts.

Good link styles make navigation effortless. Poor link styles create uncertainty, confusion, and accessibility barriers.

Scenario: Links in body content

Use when styling links embedded within paragraphs, articles, or documentation where users must immediately recognize that certain words are interactive.

You are a UX-focused design agent. Design link styles for body content in [context: documentation / article / onboarding guide].

Rules:
- Always underline inline links — underline is the universal signal for "this is a link"
  Color alone is insufficient: fails for color-blind users, print, and grayscale views
- Link color:
  Minimum 3:1 contrast against surrounding non-link text (WCAG 1.4.1)
  Minimum 4.5:1 contrast against page background
  Common: #0066CC on white — satisfies both ratios
- States:
  Default: colored + underlined
  Visited: distinct color (e.g. #551A8B purple) + underline still visible
  Hover: remove or strengthen underline, slightly darken color, cursor: pointer
  Focus: 2px solid outline in link or brand color
- Link text must make sense out of context (screen reader users navigate by link list):
  ✓ "Download the accessibility checklist (PDF, 2MB)"
  ✓ "Read our privacy policy"
  ✗ "Click here" ✗ "Read more" (if multiple on the same page)
- External links (opening in new tab):
  Warn users: append "(opens in a new tab)" or use an external link icon with aria-label
  Consider not forcing new tabs — let users decide

Accessibility:
- Use a href="..." — not button, div, or span with click handlers
- Every link: descriptive accessible name

Constraints:
- Never rely on color alone to identify links
- Never remove underlines from inline links in body content
- Never use "click here" or "read more" without context as link text