Does link color affect ad clickability? Yes!

Switching the shade of blue used on advertising links in Gmail and Google search earned the company an extra $200m a year in revenue... "And actually, to make sure we covered all our bases, we ran forty other experiments showing all the shades of blue you could possibly imagine." [theguardian.com...]

A few good takeaways - on a micro level: ever so slightly more purple link color drew more clicks (though the actual color that draws clicks may depend on overall color scheme and design). - on a macro and more worthwhile level: testing reveals untapped revenue sources that might not seem apparent.

Senior Member

joined:Dec 30, 2006
posts:3226
votes: 9

I have one page on my site for gays. I used pink for the adverts. I had it on there for months and never received a click. I thought they would be climbing over each other to click on them, but no. Changed it to green and received clicks.

Senior Member from US

joined:Nov 29, 2005
posts:7057
votes: 427

How about rainbow colors? :)

Seriously, only the younger eyes can see the differences and shades of lavender to purple or navy blue to cerulean do indicate who clicks through or not. Most times any shade of RED or ORANGE did nothing. I know this from testing internal page links, not just ads. Turns out Navy Blue (think old time blue-black fountain pen ink) got more hits as it was not THAT different from black text. Go figure.

Senior Member from US

joined:Mar 30, 2005
posts:12928
votes: 198

I'm always testing link colors and they change not only based on the site but also they seem to change from year to year. Red seems to perform most consistently on my sites, followed by blue, but some years, blue does better. Green had one really good run for a while, and after that - nuttin'.

Senior Member

joined:Aug 1, 2013
posts:1338
votes: 22

@Lame_Wolf

From someone who has had (and lost) a great many gay friends over the years, I find you're color generalization offensive. Many would have preferred Black and silver and red (dungeon colors) while others had such sophisticated color palettes (because they were artists or interior designers or just plain sophisticated visually) that only truly creative color harmony would have appealed to them. Heck, I know women who can't stand pink!

@All Google made it more difficult to work with their text ads when they removed hyperlinks from the titles and I wrote extensively on this board at the time about the role color and visual spacing now play in this game. If you are working with a branded website, you have two options generally...Harmonize your ads with your branding or create some extreme contrast by stepping across the color wheel or getting tertiary about it. Of course there's always the "keep it ugly" approach which works for those who can stand to look and work with an ugly website all day long.

Also, if you want to get better results with Adsense, you need to pay attention to the difference between "Title" and "Link" and "Text" and "Background" colors. The questions I would be asking are:

What color makes the Title of the ad seem more clickable (it is you know but if it's the same color as all the headings on your page then it just looks like another heading)?

Is it better to make the Link and Title the same color to visually bind them together (implying a larger clickable area) or is it better to contrast those two elements so the link stands out?

Should the ad unit have a border (Google is prompting people to experiment with no border right now through the Adsense interface)? This goes to the question of what background color are you using (same as the page or something different).

Pink ad? What do you mean? All pink? Pink background, pink title, pink link, pink border? Can't even see that as readable but if you're going to put that on a page targeting a specific type of person, I'd target people who like pink as opposed to some absurd stereotype.

Senior Member

joined:Aug 1, 2013
posts:1338
votes: 22

For anyone who's interested, the predominant color of ad Titles (right sidebar ads) in G's SERPs at the moment seems to be #1E0FBE (generally blue) whereas the link color appears to be #3A8953 (green).

This color combination essentially features a primary color and a secondary color. The blue is actually a slightly reddish blue (pushing it toward violet a bit but most see this as blue). Green is a product of mixing blue and yellow so the blue and green sit next to each other on the color wheel. Blue and violet would be relationally equivalent in the other direction on the color wheel but I think it's easier to contrast blue and green than blue and violet. It's easier to lighten up with yellow than it is with red (yellow a component in green whereas red is a component in violet).

Senior Member

joined:Dec 30, 2006
posts:3226
votes: 9

From someone who has had (and lost) a great many gay friends over the years, I find you're color generalization offensive. Many would have preferred Black and silver and red (dungeon colors) while others had such sophisticated color palettes (because they were artists or interior designers or just plain sophisticated visually) that only truly creative color harmony would have appealed to them. Heck, I know women who can't stand pink!

Gay Pride use a pink triangle for their symbol.

Anyway, I was replying to the OP about the experience I had with colours.

Exactly. The point of my post was not to say that everyone should run out and copy Google's link color. In fact, if anything, it was the exact opposite.

I was replying to the OP about the experience I had with colours

The meaning and associations with colors change over time and often our preconceptions not only result in poor aesthetics and possible offense, but cost money. My only point in posting was to get people to *test* their preconceptions and let design be driven at least in part by data rather than just vague opinion, which is what Lame Wolf did with apparent success and I appreciate that example.

Senior Member

Preferred Member

joined:Mar 27, 2010
posts:423
votes: 0

I had my links in black for years, then decided to do an A/B testing and went with red, then with navy blue. Frankly speaking I don't see any notable change in CTR. But then I moved one of my ads 20px up, and boom, CTR jumped 20%.

And something you should look into as well. Some colors might work better on certain devices but perform poorly on others.

@webcentric

When someone thinks that some colors go better with some group of people, how in the world can that be offensive? If you had any designer friends, you'd know that there is a specific purpose behind picking colors. Now that if one designer thinks that green is good for an Irish pub, and the other one thinks it should be orange, how in the world can anyone find that offensive, considering that they didn't pick those colors out of nowhere.

I think webcentric is complaining about stereotyping and that can indeed be offensive. It's not so much like associating the Irish with green, but with, say, public drunkenness.People can and do take offense at that.

But what I think is so cool about Lame Wolf's example is that the data showed him (her?) that gays preferred green rather than pink. That is the sort of thing that his users themselves might not be able to articulate, but given a large enough sample size, the numbers tell the story.

One of the things that keeps life interesting is finding strong data that overturns our preconceptions!

Senior Member

I think webcentric is complaining about stereotyping and that can indeed be offensive.

In that case, Gay Pride are sterotyping themselves. :)

It's not so much like associating the Irish with green, but with, say, public drunkenness.People can and do take offense at that.

There are political reasons why orange is associated with Ireland, not just green.

But what I think is so cool about Lame Wolf's example is that the data showed him (her?) that gays preferred green rather than pink. That is the sort of thing that his users themselves might not be able to articulate, but given a large enough sample size, the numbers tell the story.

Him (last time I looked)

They didn't like pink elsewhere (non-gay sections) and my site has more women visitors than men.

Preferred Member

joined:Mar 27, 2010
posts:423
votes: 0

It depends on what you call stereotyping. Is an Irish pub part of that? And if you visit an Irish pub website and see orange links, will you think that it's offensive to your Irish friends? I have Irish friends and I say no... now if you say yes does that make any difference? I can ask so many questions that in the end we'll reach to a point that people are different and that's ok. As long as you're not offending directly, it doesn't matter. And bringing up that "is it because I'm black?" doesn't work anymore.

Now back to colors...

Green and orange haven't even crossed my mind, so I'll give them a try... Few years ago I had an ad with blue background and yellow title. Looked something made out of LEGO, but performed great. Now when my audience has become more engaged with the website, and as I get emails on what they do and don't like, I have to be more cautions playing with those colors.

Senior Member

joined:Aug 1, 2013
posts:1338
votes: 22

On a more productive tangent: Google uses a white base for its sites for a huge reason. It's color neutral. There's a great deal of science to color from a psychological perspective. Using a white background allows for experimenting with the psychology of color and they're very much in tune with that fact in Mountain View. The fact remains that everyone brings a different sense of aesthetics to the table when experiencing color so when designing a site for millions upon millions, it makes sense to gravitate to what engages the majority of people. Google has that problem. Most here probably don't. Still, getting the most out of your ads is about getting the best response from the largest part of your audience so the subject is worth some study and Google's results speak to the effectiveness of a certain color combination when applies to a very large sampling of respondents. If you want to talk color, great. If you want to list your stereotypes and give them a color code, good luck. It worked out so well for the Nazi's after all.

I think if you dump the stereotypes for a moment, what you will find is that this subject has more to do with using color to attract the eye from one part of the page to another and to represent clickability. Blue is the traditional color of links on the web. It's also a calming color (non-aggressive, non-threatening). Add black to blue, it get's darker and stands out better on a light background. Add enough white, it will still read as blue but stand out on a dark background. Context is important e.g. the color context of the page and to a lesser degree, how the audience subconsciously relates to color.

Senior Member

joined:Aug 1, 2013
posts:1338
votes: 22

on a micro level: ever so slightly more purple link color drew more clicks

This makes sense from a color perspective in an otherwise color-neutral environment. It's like adding a subtle note of aggression (red to make violet) to an otherwise calming and traditional color (blue).

Senior Member

You sound like someone who is old enough to know that you cannot please everyone all of the time.

Shall we spend some time talking about offensive American Football names?

I didn't know people were not allowed to use pink on adsense. I thought I was allowed to test using different fonts, font sizes, colours, positioning.

For one, it was a new page and topic. I also wanted to use different colours to what I have already used on the site. I am restricted to what colours I can use due to the background colour of the site.

Senior Member

joined:Dec 30, 2006
posts:3226
votes: 9

I would like to add one thing. Although I didn't receive any clicks whilst it was pink (tried different shades), I have received almost $1000 in donations (spread over time) from one person who is from that community. She never saw any offence by it.

Like I have said before, it is all about testing different things. You won't know unless you try them.

Senior Member

joined:Aug 1, 2013
posts:1338
votes: 22

@Lame_Wolf

Could you post the predominant colors you use on your site (hex values) so we can get a handle on your color palette? It would be an interesting exercise to see if anyone could offer up some suggestions for ad coloration (I'd be willing to give it a go). Not everyone understands color theory but perhaps an example will help others (and maybe you) get a handle on how the color wheel can be used to create contrast and or harmony in a given color scheme. Anyone else who's having trouble in this area is invited to share your color scheme if you need some ideas as well.

I prefer the adverts to stand out, rather than blend in.

I prefer ads to stand out as well. They attract the eye intentionally instead of trying to trick people into an accidental click. You can actually overpower your content if you do this right (drawing practically every page viewer to look at the ads when scanning the page).

And one last though for now. Marketing is not just selling. If you're using ads on your page, you are marketing the ads themselves to your viewers. You want to attract people to them and make them as friendly to each viewer as possible. We don't have control over what ad shows but we do have control over placement, color, font, etc. These considerations are marketing considerations in my thinking. Food for thought anyway.

Senior Member

May have been a bad move but it's done so the question remains (and why this thread is important) is how to adjust to the change. Color has become a very necessary tool for succeeding with Adsense.

Learning to communicate with color is, frankly, a fundamental skill for anyone trying to communicate visually. The web is primarily a visual medium which means webmasters are missing something if they don't understand at least a little bit about how color works. Along with lines and shapes, color is one of the cornerstones of design. There are also the concepts of positive space and negative space (white-space) to consider. Color, line and shape work together to create positive and negative space which controls where the eye pays attention and where it pauses for a break. "Value" (light vs dark generally) also plays a major role design. Together, these elements are used to guide the viewer through the visual experience.

Graphic designers, artists, advertising professionals (you better believe it), and even movie makers are acutely aware of these fundamentals. Webmasters could do worse than spend a little time trying to actually understand them as well.

I can often spot a page that's an ad-trap solely by the color scheme. Seems people who like to create pages of ads with little or no usable content on them have very little understanding of color. You'd think they'd understand that the default Adsense color scheme is a brand unto itself that is easily recognized. For those that hate this kind of site, the color scheme alone is enough to scream "BACK UP NOW."

Administrator from US

joined:Jan 25, 2005
posts:14650
votes: 94

Before putting the gay color controversy to rest, people DO design specifically for gays just like they do for moms, kids, dads, pet owners, different ethnic groups, etc. It's called smart marketing and targeted marketing. What works with one group of people doesn't always perform best with other groups, known fact. Sadly, we're not adult enough to discuss it as it happens every day and I could show you tons of websites that do it.

And BTW, gays are just like anyone else. They aren't going to respond to pink links just because they are gay. They'll most likely respond to blue links like everyone else does.

Nobody said gays were any different, but there are colors that have special meaning used in a lot of gay oriented marketing starting with the pride colors and pink is a big color as well.

I'll link from here: [printwand.com...] color pink also has a strong connection to the LGBT (lesbian, gay, bisexual and transgender) community, and is often incorporated into the branding of LGBT events and organizations.

Addressing demographics with color schemes is smart marketing as I've done it myself with specific color palettes aimed at moms, kids, dads, nerds and even the adult market.

Color was the topic of the thread and the fact that someone disclosed a specific demographic being targeted was useful information, not showing insensitivy. Just the opposite, addressing the needs of a specific group or community shows you're actually being sensitive to their market, something that might land the sale over other sites.

Like I have said before, it is all about testing different things. You won't know unless you try them.

EXACTLY!

You did some A/B testing and that's the whole purpose and thread topic. It was worth a shot and I'm glad you brought it up as I might've tried the same but I suspect I'd go with lavender links, just me. :)

Heck, I know women who can't stand pink!

Me too. But they also drive race cars and do lots of other boy stuff.

Not all girls are brought up in the land of pink with unicorns shooting rainbows out their butts, but the vast majority respond to the "female palette" leading me to build a site aimed a Moms with a color scheme that while actually quite pretty, makes it really hard for me to work on the site. Ugh.

<mod>

OK, let's stop the gay color food fight.

That topic is done, move along.

Facts. Stick with the Facts.

Don't forget, we discuss the topics and not the personalities discussing those topics.

Senior Member from US

joined:Nov 29, 2005
posts:7057
votes: 427

All of this comes down to what has been researched over the last 1000 years or so... "Call to Action" "Action Color" "Emotion Color" etc. As webmasters we need to know these things as well... as well as using ordinary common sense regarding "what looks good" "what is readable" "what communicates". A place to start: [paulolyslager.com...] There are other links one can follow for "psychology of color" and "action color".

Just keep in mind that "action colors" work within the environment where the action is to take place, ie. your website. ALL colors are considered IN ADDITION to the "link" color. If that action color is not visible because of the environment, no action will occur.

Usually it is the words that call for action, but color can as well, so check to make sure that all positives are embodied... else... no action.

Senior Member

Well said tangor. One thing the linked article states is that it's important to design for people who are color blind. This IMHO is where the concept of using "value" to create contrast is important.

To change the "value" of a color, when mixing paint, for example, you can simply add either white or black to your base color (in hex colors, black is zero and white is f). Color blind people can normally see contrast so by pushing one color toward black and another toward white, the two colors actually contrast from each other. If you put the resulting colors into photoshop or gimp and converted them to grayscale you'll see that it's easiest to distinguish between them if one if far darker than the other. You can also darken one color with another color but using black and white makes the concept pretty clear. A great exercise for the action-ability of any given element on a page (where color is concerned) is to think like a color blind person. Take a screen shot of your page and then use your favorite image editor to convert it to grayscale. See if the items you want to jump out actually do or if the whole design just gets washed out. In grayscale, you're looking for contrast. Ideally, you want pure black in some places, white in others and shades of gray in others. This means you're using the full range of available "value" for the most possible contrast. Ask yourself if the things you want to pop are popping out at you. If not, adjust your colors and try again.

Administrator from US

joined:Jan 25, 2005
posts:14650
votes: 94

One thing the linked article states is that it's important to design for people who are color blind.

Forget just color blind, the bigger demographic would be people with cataracts and other such eye afflictions like I suddenly ran into 2 years ago. The contrast is a huge issue and dark fonts on dark backgrounds or conversely light faded fonts on white, is a real problem. Heck, I had to use a phone camera flashlight to read most menus in restaurants if they weren't simple B&W menus for the very same reason.

Even more important is the font size and whether it will scale on the page properly when zoomed because the 20-somethings and their 8pt reading eyes are just wrecking the place for people over 40 with money to spend which is why we all shop at Amazon.

When my eyes were at their worst, I was legally blind, Amazon could be read with ease when zoomed 300%, colors, links, BOLD fonts, everything was right on the money. True, it's bland and kind of boring but effective which is the bottom line and why I shopped there more often than not until I got my eyes fixed.

I would add to this topic that BOLD fonts will affect clicks, not only colors, because if someone has difficulty reading some thin skinny font they'll probably move on to something easier to read.

Senior Member

joined:Aug 1, 2013
posts:1338
votes: 22

A simple technique for seeing the prominent detail in a design (and the way people with poorer vision see) is to squint at your page just enough to make it somewhat fuzzy. This is similar to the greyscale approach in that the dominant features will stand out through the fuzziness. You might not be able to read anything that way but the technique can help you quickly identify the hotspots in your design (or highlight the fact that your hotspots aren't so hot).

Here's a color value experiment for you. Take these three colors (#ff0000 - Red, #00ff00 - Green and #0000ff - Blue) and use them in equal parts in a graphic. Now turn the graphic into a grayscale image and notice how they all become a very similar shade of grey. This is because each has the same amount of white and black shading them. You've used three colors of almost identical value and even though you see three different colors, they all read as a medium gray on the value scale. Now try the same experienc with these colors (#220000 - dark red, #008800 - a medium green, and #0000ff - a light blue). You'll notice that these colors now encompass a much wider spectrum of the grayscale when converted. One is close to black (the red) and another reads closer to white (the blue) while the other serves as a medium gray (the green). Google used violet to change it's blue links to give them a slightly deeper and more aggressive color. Working with a very colorful design is a bit more complex than G's color scheme but the same principles apply.