Does link color impact usability and conversions?
-
Blue links perform best overall due to user familiarity and established patterns, encouraging quick recognition and interaction.
-
Context and design style matter. Consider using link colors that align with your interface’s accent colors to ensure clarity and consistency.
-
Contrast is critical for call-to-action links. A standout color against surrounding text improves visibility and effectiveness.
-
Purple can confuse users as it’s still associated with visited links.
-
Links on dark backgrounds should use muted colored tones with a hint of white rather than plain white for better visibility.
-
Keep accessibility requirements in mind. WCAG guidelines recommend combining color with other markers (e.g., underlining or bold text) to ensure usability for color-blind users.
-
Distinguishing visited links is vital. It aids navigation, prevents revisiting unhelpful pages, and supports users’ sense of control, especially for those with weaker short-term memory.
-
Failing to change a visited link color risks user confusion, repeated mistakes, and abandonment, particularly for older users.
Deep dive
Effective link design impacts how quickly users find what they need—or if they find it at all. Color is a key factor in this.
We’ll skip color psychology for now, as we covered it in a dedicated chapter. For deeper insights, check out these articles:
📚 Do different cultures perceive colors differently? How does this affect design decisions?
📚 How do I choose colors that create the intended emotional response?
📚 How do I choose colors that align with the app’s purpose and functionality?
Here, we’ll focus on how link color influences user engagement and conversions.
Which link color works best?
Links can be any color—red, green, or orange—but blue feels most natural to users.
It's an established pattern many instinctively recognize. Blue text signals a link, reducing hesitation and encouraging quick interaction.
Consider the context and design style
A lot depends on the context and design style.
If you use red consistently as an accent color in the interface, red links will align with the design and users will more likely understand them clearly.
For a link used as a call to action, contrast from the surrounding text is critical. Hence, it’s worth considering a color that stands out. Even an icon may not create enough emphasis, but color will.
Purple can be a risky choice since it's still often associated with visited links, even though some designers consider it to be outdated. Most websites now use the same color for visited and unvisited links. We address this question in more detail later.
Links on dark backgrounds don’t have to be white. A better approach is to use a colored link with a softer, muted tone, adding a hint of white to the shade.
Keep accessibility requirements in mind
☝️ Remember: WCAG guidelines don’t recommend using color alone to differentiate links or buttons from text. Simply using blue or another shade may not work for users with color blindness.
Common solutions include underlining or using bold text for emphasis.
📚Related reading: What are link accessibility best practices?
Case study: pink, red, or blue?
Matthew Woodward conducted a case study to find out the most effective link color for his website. He updated the hyperlink text color within blog posts, leaving sidebar links unchanged.
The three variations tested were:
-
Pink: the original color;
-
Blue: the traditional "classic" blue;
-
Red: the “default” #ff0000 red.
The test ran from May 31 to June 12, with 7,845 unique visitors divided across the three variations.
The study measured the impact on:
-
Bounce rate;
-
Visit duration;
-
Pages per visit;
-
Conversions (email subscriptions, affiliate clicks, resource downloads).
Matthew analyzed two groups:
-
All visitors (new and returning);
-
New visitors (to capture fresh impressions).
Results: performance for all visitors
Blue links performed the best, leading to the longest visit duration, lowest bounce rate, and highest goal conversions.
Surprisingly, red links performed poorly despite standing out the most against the site’s blue and pink theme.
Results: performance for new visitors
Red links outperform the others, driving the longest visit duration, lowest bounce rate, and highest goal conversions. Pink and blue variants perform similarly, though blue edges ahead slightly in goal conversions.
Matthew’s assumptions about returning visitors’ results
He believes returning visitors performed differently because:
-
They are already engaged with the site and are accustomed to clicking pink links.
-
They recognize and associate the original pink color with the brand.
-
The red variants reduced readability and felt like a step backward for loyal readers.
Interestingly, the blue link color subtly blended with the site’s branding while still standing out as a clear call to action. This might tap into the subconscious familiarity Microsoft created with its classic blue links over time.
Matthew’s assumptions about new visitors’ results
New visitors responded differently since they lacked familiarity with the site and saw it with fresh eyes. Unlike returning visitors, they had no prior expectations about the design or readability to influence their experience.
As Matthew says, “points of conversion should stand out like a sore thumb,” and the red variants did just that. Bold and attention-grabbing, they bordered on distracting—but for new visitors, this wasn’t a drawback. It was their first impression, not a departure from a previous one.
How to interpret these results?
Matthew suggests showing red links to new visitors and blue ones to returning ones. However, this approach isn’t very practical and could confuse users.
Ultimately, it comes down to a deliberate decision, based on the context, overall design, and accessibility requirements—unless the team opts for more thorough usability testing.
Why is it important to change the color of visited links?
One of the oldest principles in navigation design is helping users understand three things: where they’ve been, where they are, and where they can go next. These concepts are linked. Knowing past actions helps users make sense of their current location, which in turn guides their next steps.
On the web, links are central to navigation. Distinguishing visited links allows users to avoid revisiting pages that weren’t helpful or to quickly return to pages they found useful. Most importantly, it prevents users from unintentionally revisiting the same pages, saving time and reducing frustration.
Changing the color of visited links aligns with hypertext theory, web design history, and current usability standards. According to Jakob Nielsen, failing to distinguish visited links causes serious issues, such as:
-
Repeatedly revisiting unhelpful pages.
-
Increased confusion, as users lose track of their progress.
-
Misinterpreting or overlooking differences between similar links.
-
Losing confidence in navigation, leading to quicker abandonment.
These problems are especially challenging for people with weaker short-term memory, including many older users.
However, all users benefit when visited links are visually distinct, as it provides clear feedback and reinforces their sense of control over the site.
❓Questions designers should ask themselves
By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.
-
Does the hyperlink color stand out?
-
Does it align with accessibility standards?
-
Does it fit the site’s branding?
-
Is it consistent across the site?
-
Do call-to-action elements grab attention?
-
Are visited links clearly marked?
-
How do the hyperlink colors affect readability?
-
Do they work well in dark mode?
-
Have we tested the link color palette with users?
⚠️ Common mistakes to avoid
Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.
-
Choosing link colors that lack enough contrast against the background, making them hard to read, especially for users with visual impairments.
-
Failing to include other visual cues like underlines, bold text, or hover effects.
-
Not differentiating between visited and unvisited links, leading to user confusion and frustration.
-
Using multiple colors to signify different types, which can confuse users instead of clarifying navigation.
-
Not testing color choices for compliance with accessibility standards, excluding users with color blindness or low vision.
-
Picking an overly bright or clashing link text color, which can draw unnecessary attention and disrupt the visual hierarchy of the design.
-
Overlooking how colored links look and function on small screens, where readability and touch targets are more critical.
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!
-
How link color affects conversion – split test results by Matthew Woodward
-
Links by Imperavi
-
Guidelines on designing better hyperlinks by Slava Shestopalov
-
Change the Color of Visited Links by Jakob Nielsen