Red or blue? Which would you pick? Don't worry, we're not talking about the wires of a ticking time bomb! We're talking about something equally important – the color of your website's links. Have you ever wondered if those little links, with their seemingly simple colors, can actually encourage people to explore your website and ultimately, become your customers?
It's a question that many website owners think about a lot, and it really got one website enthusiast curious. He decided to find out more and today we’ll share his findings.
The hidden power of colors
While we won't delve into the details of color theory (though it's a fascinating subject!), it's crucial to understand that color can make a big difference in how people react. Just think about how different brands use color to evoke specific emotions or build a certain image.
This influence of color can directly impact whether visitors become engaged customers or simply bounce off your website.
For instance, this website owner learned that just changing the color of a button led to a big increase in their earnings. It's a simple but powerful idea: calls to action – those prompts that encourage visitors to take a desired step, like signing up for a newsletter or making a purchase – need to stand out. If your website has a calm, classic white and blue color scheme, using a bold contrasting color like red for your calls to action can instantly grab attention and entice clicks. After all, we're naturally drawn to what stands out from the crowd!
Pink, red, or blue
This website owner had already thoughtfully chosen pink for their links and blue for their headers when they first built their website. It was a strategic choice designed to make the links pop against the rest of the content, making them more noticeable. But they wanted to know if they could push things further, optimize even more!
A link color showdown
To uncover the true impact of link color, the website owner decided to run a test. They focused on the links within their blog posts, keeping the sidebar links untouched. Three different link colors were put to the test:
The experiment ran for two weeks, attracting a total of 7,845 unique visitors across the three different link color versions.
What did the data reveal?
The website owner wanted to see how these different link colors impacted key website metrics, including:
To get a deeper understanding, the data was analyzed in two ways:
The results were displayed in easy-to-understand charts and graphs, giving the website owner a clear picture of how link colors influenced visitor behavior.
Let's dive into the results for all visitors first:
The website owner started by examining bounce rate, visit duration, and pages per visit to see how the different link colors affected overall browsing patterns.
How visitors react to different colors:
Let's dive deeper into the data from our link color experiment and see what insights it reveals about how visitors interact with websites. We'll explore how both familiar and new visitors responded to the different link colors.
All visitors
Bounce rate, visit duration & pages per visit are up first:
And then conversion:
Here’s a simple table to structure the results better:
Link Color |
Pages/Visit |
Visit Duration |
Bounce Rate |
Goal Conversion |
Pink |
2.65 |
00:05:53 |
47.82% |
9.32% |
Blue |
2.65 |
00:06:05 |
47.44% |
10.22% |
Red |
2.51 |
00:05:41 |
49.61% |
9.84% |
When we look at all visitors – both those returning to the website and those visiting for the first time – blue links emerged as the clear winner. They encouraged visitors to spend a bit more time exploring the site, resulted in fewer people bouncing away after just one page, and led to the highest rate of visitors achieving the desired goal (like signing up for a newsletter or making a purchase).
It seems that years of seeing blue links on websites, particularly from giants like Microsoft, have subtly trained our brains to recognize blue as a signal to click. It's like a secret code that our minds have learned to understand.
While red links stood out the most, they didn't perform as well as blue. We'll explore why that might be later on.
New visitors
Bounce rate, visit duration & pages per visit are up first:
And then conversion:
Here’s a simple table to structure the results better:
Link Color |
Pages/Visit |
Visit Duration |
Bounce Rate |
Goal Conversion |
Pink |
2.23 |
00:03:45 |
53.13% |
8.09% |
Blue |
2.14 |
00:03:41 |
53.55% |
8.85% |
Red |
2.23 |
00:04:00 |
52.57% |
9.56% |
Things get interesting when we focus on first-time visitors. Here, red links took the lead! They led to slightly longer visits, a slightly lower bounce rate, and the highest conversion rate. Pink and blue links performed similarly, with blue showing a slight edge in encouraging visitors to achieve the desired goal.
Why the difference?
This change in how new and returning visitors respond to different link colors is really fascinating. Let's try to unravel the reasons behind it.
Returning visitors
Returning visitors, who are already comfortable with the website and its original pink links, seemed less enthusiastic about the switch to red. They were likely already engaged and accustomed to the website's established look and feel. Plus, many found the red links a bit less visually appealing and potentially harder to read, making their experience a bit less enjoyable. While they couldn't fully resist the subconscious pull of blue links, they were also used to pink. Blue links, however, blended better with the overall feel of the website.
New visitors
New visitors, on the other hand, were experiencing the website for the first time. They didn't have any preconceived notions about the website's design or link colors. The red links, with their eye-catching nature, acted like a powerful signal, immediately grabbing attention and encouraging engagement. While it might have been a bit distracting for some, it wasn't a negative experience for them since it was their first impression of the site.
Finding the perfect color
So, based on these findings, what's the best strategy? Ideally, we'd show red links to new visitors and blue links to returning visitors. But that's not very practical, and it would probably confuse visitors in the long run.
Can we retrain visitors?
The website owner wondered if they could get their regular visitors used to clicking on red links. They thought that if they just changed the link color and kept it that way, people would eventually get comfortable with it. It's like how Facebook changes things – people might complain at first, but they usually get used to it over time.
Ultimately, the decision about the best link color comes down to the preferences of the readers.
FAQ
What's the default color for links?
Most web browsers automatically set the color of links to blue (#0000EE). Unvisited links are usually underlined in blue, while links you've already clicked on are underlined in purple (#C58AF9).
How can I change the color of my website's links?
If you want to customize the color of your website's links, you can easily do it through your website's customization options. Go to your website's "Dashboard," then click on "Appearance" and then "Customize." Look for "Theme Options" and "Link Color," and you'll be able to select the color you'd like to use for your links.
Why do links change color after I click them?
Links change color to let you know you've already visited that page. The default color is usually blue (or a color you've chosen), and once you've clicked on the link, it changes to purple as a visual reminder that you've been there before.
What colors are best for website links?
Based on the experiment discussed earlier, blue links generally tend to perform better. They led to longer visits, lower bounce rates, and higher conversion rates. Essentially, blue provides a strong visual signal that the text is a clickable link. However, it's important to remember that this is a matter of preference and other colors can also work well. Choose a color that complements your website's overall design and branding.
How can I find the link color code within my website's code?
You can find the link color code within your website's HTML code. Within the anchor tag (<a>), after the "href" attribute (which specifies the destination of the link), you can add a "style" attribute. Set the "color" property within the style attribute to your desired hex color code. For example:
```html
<a href="https://www.example.com" style="color:#FF0000;">Click here</a>
```
This code would make the link text red (#FF0000).