Why Hyperlink Design Matters: Boost UX, Accessibility, and SEO

Hyperlinks act like glue that connects web pages; without them the web would not exist as we know it. Using a simple <a> element you can create a bond to other pages. Yet hyperlink design is often under‑appreciated despite being a core part of HTML and user experience.

Hyperlinks Should Look Like Hyperlinks

All links on a page should clearly indicate they are clickable and interactive. While designers like to experiment, conventional styling—blue color with underline—remains a reliable standard because users have been accustomed to it for years.

Examples of Hyperlink Designs

These examples show blue links that stand out in text. The New York Times design is considered superior; the reasons are explained below.

A Simple Way to Test Your Hyperlink Design

Remove the page text color (use default black) and apply a blur effect to simulate rapid scanning or vision‑impaired users. To do this, change the CSS of <a> and <p> to remove color and add a blur.

Modify the CSS of <a> and <p> to remove color and apply a blur effect.

Take a screenshot and edit it in Photoshop:

Image > Adjustments > Desaturate

Filter > Blur > Gaussian Blur

After applying desaturation and blur, the Guardian example shows how hard it is to see links.

BBC uses bold text to highlight links, which is slightly better.

The New York Times still makes links distinguishable.

The Problem with Underlining Links

Research shows that underlined links reduce readability because parts of characters such as p , g , j , q are obscured by text-decoration: underline. Chrome’s default style for links (version 28) illustrates this.

What’s the Solution to This Readability Issue?

Customize the underline using border-bottom instead of text-decoration, shifting it a few pixels down to improve readability.

CSS example:

a {
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid blue;
}

Changing the underline color separately from the link text allows further control, e.g., using a lighter link color:

CSS:

a {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #8d8df3;
}

Make Hyperlink Text Longer

Longer, descriptive anchor text improves usability (Fitts’s Law) and SEO. Fitts’s Law states that smaller targets farther away take longer to reach, which is especially relevant on touch devices.

Increasing the font-size of <a> can disrupt reading flow and line‑height consistency, as shown by large‑size link examples.

Therefore, height should not be increased; width can be.

User‑friendly SEO Benefits

Longer anchor text aligns with Fitts’s Law and provides SEO advantages. Descriptive anchors tell users and search engines what the linked page is about, unlike generic “click here” links.

"I would like to talk about advanced wall‑building techniques. Click here to learn how to build a basic wall because what I will talk about is beyond the basics."

vs.

"I would like to talk about advanced wall‑building techniques. You will need to learn how to build a basic wall because what I will talk about is beyond the basics."

The second version is better for both users and search engines.

Should Hyperlinks be Blue?

Google’s survey shows blue links receive more clicks than greenish‑blue ones. However, the most important rule is that links must be visually obvious. If another color achieves that, it’s acceptable. Microsoft’s MSDN also supports this. Links should be recognizable without hover.

Always do what benefits users, even if it breaks conventions.

Summary

Hyperlink design should be thoughtful.

Applying desaturation and blur quickly tests link visibility.

Underlines are common but can hurt readability; CSS can fix this.

Long, descriptive anchor text improves usability (Fitts’s Law) and SEO.

Links must be obviously recognizable as links.