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.