How Link Color Affects Conversion – Split Test Results

Have you ever wondered if link color make a difference to conversion and engagement with your site?

As your resident sad act, I have!

Earlier in the month I took a look at if it’s better to have your sidebar on the testing logo designs makes a difference.

But what about link color?

Color Influences People

I’m not going to bore you with the ins and outs of color theory although it is an interesting topic.

But take a quick look at how these brands apply color-

color changes behaviour

Color can have a huge impact on behavior and as such it directly influences conversion.

This was seen when I changed the color of a button to increase profits.

As a general rule of thumb any calls to action should stand out from the rest of the page.

If you have a white/blue design – your calls to action should be red so they attract attention.

Things that stand out get noticed. People click on things that stand out.

Pink Links vs Red Links vs Blue Link Color

When I setup the blog I changed the color of the links to pink and headers to blue.

This was so the links stand out from everything else on the page as I explained above.

So the blog was already optimised to some degree in that respect, but can I take it further?

Setting Up The Test

I changed the color of all links within blog post content using the instructions in this post.

Link colors in the sidebar etc. were not changed.

There were 3 possibilities-

  1. Pink – This is the original link color
  2. Blue – This is the ‘classic’ blue link color we are trained to click
  3. Red – This is the ‘default’ #ff0000 red

The test ran from May 31st – June 12th and saw a total of 7,845 unique visitors between the 3 variations.

The Results Are In

I decided to look at how the change in link color affected key metrics such as-

  1. Bounce rate
  2. Visit duration
  3. Pages per visit
  4. Conversion (email subscription/affiliate click/resource downloads)

I also decided to segment the data in 2 ways-

  1. All Visitors – A look at all traffic both new & returning
  2. New Visitors – Just new visitors – it is likely that returning visitors are already ‘trained’ to use the site. New visitors provide a ‘fresh’ look

You can click on any of the images below to get the full versions.

So first of all let’s take a look at how it affected all visitors.

All Visitors

Bounce rate, visit duration & pages per visit are up first-

initial engagement test results

And then conversion…

initial conversion rate test results

Let’s break it down in table format to make it a bit easier to read, digest & compare.

Link ColorPages/VisitVisit DurationBounce RateGoal Conversion
Pink2.6500:05:5347.82%9.32%
Blue2.6500:06:0547.44%10.22%
Red2.5100:05:4149.61%9.84%

The blue links delivered the longest visit duration, lowest bounce rate and the highest goal conversion.

Seems like Microsoft did a good job of subliminally training us over the years with the classic blue link color.

Interestingly the red links performed pretty poorly but stood out the most against the blue/pink theme of the site. More on why that is later.

Perhaps visitors that haven’t seen the site before will behave differently.

New Visitors

Bounce rate, visit duration & pages per visit are up first-

link color general test results

And then conversion…

link color conversion rate test results

Let’s break it down in table format to make it a bit easier to read, digest & compare.

Link ColorPages/VisitVisit DurationBounce RateGoal Conversion
Pink2.2300:03:4553.13%8.09%
Blue2.1400:03:4153.55%8.85%
Red2.2300:04:0052.57%9.56%

When we look at just new visitors things are very different.

This time the red links are the best performing in terms of visit duration, bounce rate and goal conversion.

The pink and blue links perform at similar rates with the blue links edging forward on goal conversion.

But why did this happen?

Wrapping It Up

When both new and returning visitors were shown red links it had a negative impact when compared with the pink links.

But when just new visitors were shown red links it had a positive impact.

Why though?

Returning Visitors

I believe this is because my returning visitors are-

  1. Already engaged with the site
  2. Already familiar with the original pink link color/brand

The red links were also pretty ugly and I felt like they decreased readability, so this was a ‘step back’ for my loyal readers.

My regular readers are already ‘trained’ to click pink links-

Facebook link color feedback

However they couldn’t overcome the subliminal blue link color that Microsoft has trained us to click on over the years.

The blue link text color actually blended into the branding of the site better than the red links while still standing out as clear calls to action

New Visitors

New visitors behaved differently because they didn’t have the pre-conceived familiarity with the site and were seeing it fresh for the first time.

They didn’t have a benchmark of design or readability to fall back on like returning visitors.

At the start of this post I said that “points of conversion should stand out like a sore thumb” and the red links certainly did that.

They were upfront and in your face to the point of distraction but this wasn’t a step back for new visitors as it was their first step.

So how on earth am I meant to pick a default link color winner?

Can You Retrain Visitors?

Based on the data the logical thing to do is show new visitors red links and returning visitors the blue link color.

But that doesn’t seem very practical and will lead to user confusion long term.

So that has me wondering…. Is it possible to reprogram my loyal readers to show the red links some love?

If I just forced the change on you guys you would have no choice and over time you would be ‘retrained’.

That’s what Facebook do when they want to change things up right? Although that always goes down like a knackered lift for a few days.

What color do you think the links should be? Answers in the comments please – your feedback decides this one!

Frequently Asked Questions

What color are hyperlinks?
The classic color that is used for hyperlinks is blue (#0000EE) but realistically you can have whatever colour you want to make them stand out.

How do you change the color of a hyperlink in HTML?
To change your hyperlink color in HTML, go to the ‘Dashboard’ click on ‘Appearance’ and then ‘Customize’. Find ‘Theme Options’ and ‘Link Color’ and then you can select your color that you wish to change the hyperlink to.

Changing your link colour gives your website a new look.

Why do links change colors?
Links will change colour when they have been clicked on.

The default colour of the links is blue or another colour which you can choose. When that link has been clicked the default colour of the link changes to purple.

100 Shares
Share83
Tweet2
Share15