Back to Blog

How to Customize Link Visibility on Any Website for Better Navigation

PB

Patrick Bushe

November 1, 2024 · 5 min read

On many websites, links look almost the same as the text around them: no underline, a slightly different color. That's hard for people with low vision, color blindness or attention difficulties, and annoying for everyone else. You can change how links look on any site.

Why links get hard to see

Designers often remove underlines for a cleaner look and rely on color alone. The accessibility guidelines (WCAG 1.4.1, Use of Color) say color shouldn't be the only way to show something is a link. If links aren't underlined, they need clear contrast with the surrounding text plus another cue, such as an underline on hover and focus.

1. Underline every link

  • Firefox: the color options in Settings → General, next to the font settings, include an option to underline links and choose link colors.
  • Chrome and Edge: use a custom-style extension such as Stylus, with a rule like a { text-decoration: underline !important; } applied to all sites.

2. Use your own link colors

In the same style extension, set a bright color for links and a different one for visited links, so you can see where you've been. Pick colors with strong contrast against the page background; the contrast checker helps.

3. See where keyboard focus is

Chrome's Settings → Accessibility → Show a quick highlight on the focused object flashes a highlight around whatever you've tabbed to. See keyboard-only navigation.

4. Show link hints

Extensions such as Vimium label every link on the page with a letter or two when you press a key. Type the letters to open the link. It's useful for finding links you'd otherwise miss, and for browsing without a mouse.

5. Use your system's contrast themes

Windows contrast themes replace website colors with a fixed set, including a distinct color for links. macOS has Increase contrast in Accessibility → Display. Both affect your whole computer.

6. Reduce clutter around links

Links are harder to spot on busy pages. Reader view removes most of the clutter. ADHD Reading Focus shows one paragraph at a time in larger text, so links within a paragraph stand out more.

A note on dark mode

Dark mode extensions change page colors, which can make some link colors harder to see. If that happens, add a link color rule for dark backgrounds in your style extension, or turn dark mode off for that site.

For site owners

Underline links in body text, keep a visible focus outline, and make link text describe where it goes, not "click here". See how tab order affects usability.

More Tools by Patrick Bushe

Free Chrome extensions to boost your productivity and privacy