Gmail changes your black-colored links to blue

February 03, 2012

In recent weeks, a couple of our customers have contacted us to report that links in their email campaigns have suddenly reverted to a default blue color in Gmail. Upon discussion with these customers and a little testing on our part, we found that any link with either style="color: #000000;" or a { color: black; } applied was having the color CSS property stripped from their code - therefore allowing Gmail's default stylesheet to go to town with their design.

While it's annoying that Gmail should make this rather arbitrary change, thankfully there's an easy fix. Cool customers Wilbert Heinen and Benjamin Kinzer both came up with the same solution - use a link color that's black, but not quite black. For example:


<a href="#" style="color: #000001;"> ...

Alternately, you can use color: #000000 !important;, which oddly enough, doesn't get stripped out of the code.

In wondering what Gmail holds against the color black, we turned to Spinal Tap for answers:

When it comes to links in Gmail, anchor links can be 'none, none more black'.

Thanks to Wilbert and Ben for these fixes to a rather kooky new email rendering issue. If you see any further changes in Gmail, be sure to get in touch with us.

Posted in: Tips & Resources

19 Comments

Jacques
February 2, 2012 3:29pm

You’re a bit late to the party!

https://twitter.com/#!/iamacyborg/status/156317439393660928
Ros Hodgekiss
February 3, 2012 1:22am

Haha, but first to blog it, Jacques! ;) Yes, we’re well late to the party, sorry about that - thanks for pulling me up by the bootstraps there :D
Ed Melly
February 3, 2012 2:17am

Isn’t it the case that Outlook ignores inline styles with an !important declaration? So safest to stick with just off black.
Joi Brooks
February 3, 2012 3:11am

I’ve been doing this for a long while. My concern is Gmail turning phone numbers to blue! Has anyone tried to use font tags for phone numbers with important declaration? I’ll give it a spin…
Ros Hodgekiss
February 3, 2012 3:19am

@Ed Melly - That’s interesting, I’ll check that out - thanks for the tip! Agree, off-black is a safer option, either way.

@Joi - There’s a fix to Gmail turning phone numbers blue in this blog post. Let us know how you go using !important, though :)
Adrian Ragucos
February 3, 2012 6:06pm

I remember having to do something similar for white text: style=“color:#fefefe;”. I actually still do it now - it doesn’t hurt if I do it or not.

Something about having a Spam Assassin rule with a major score for white text, I think as a text-hiding technique for spammers…
Ηλεκτρονικο τσιγαρο
February 4, 2012 3:34pm

Nice article guys :P And yes Ros you came a little late :D
Justine Jordan
February 4, 2012 6:09pm

Hey Ros, thanks for this post! It was something we were looking into as well. The folks over at Pure360 also found that including a color to the anchor’s parent tag would do the trick (strangely enough, it doesn’t have to be the color you want the link to be)

http://www.pure360.com/resources-and-tools/online-marketing-blog/blog-entries/How-to-get-Gmail-to-colour-your-links
David Padilla
March 7, 2012 9:29pm

Yahoo web mail also changes css/html coding in email.
Example: I had an opening headline that read “Welcome to website.com!”
My css called for a bold, white font on a dark blue background. Yahoo automatically turned ‘website.com’ into a blue text hyperlink even though I did not want it to be clickable text. The blue text was hard to read against the dark blue background. The only way around it was to make ‘website.com’ an image.
Mark Eagleton
March 7, 2012 9:38pm

Now the answer to how much more black could this be is one. One more black.
Purchase Digital / email marketing
March 8, 2012 1:41am

@Adrian I believe the Spam Assassin rule is white text on white background, not merely the use of white text? Anyone willing to correct/clarify?
Justin White
March 8, 2012 2:46pm

Another way that is fairly failsafe is wrapping the text in the anchor in a font tag with the black colour as well as any other styles eg text decoration etc. I’ve been doing this by default as even if you set the anchor colour on the tag itself the underline renders as blue in Outlook.
Mendel
March 10, 2012 9:48pm

btw, in my testing the same problem is with white or #ffffff (like on a dark background).
Mendel
March 10, 2012 9:54pm

Can someone find a cute video for why white is no good too?... :D
Mary
March 11, 2012 10:24pm

Thanks for the tip!
ted@tedgoas.com
March 25, 2012 6:37pm

I don’t know what all this talk of Ros / CM being late… this was the first answer I saw!

Is anyone having this issue with WHITE links in Gmail? My {color: #ffffff !important;} is being rendered as the default browser blue in Gmail today. I even tried the trick above, substituting #fffff1 for straight up white.
Nat
March 26, 2012 4:50am

I’m seeing the same issue with my links, although the default link color is a yellow #FFD801. I’ve tried adding an inline ” style=“color:#FFD801 !important;” ” tag, but it still shows up as blue in Gmail.

I’m only seeing this problem in the content areas of my emails. So the links in the HTML of my template display the correct yellow color, but the main content has the color stripped and turned to blue. Has anyone else seen this problem?
Ros Hodgekiss
March 27, 2012 8:19am

Hi Ted and Nat, I tried to reproduce this issue on my end, with no luck (ie. white links were white). If you have a mo’, could you kindly email campaign details to support [at] campaignmonitor.com? Really keen to work out why this is happening for you. Thanks for writing in! :D
zonk
March 31, 2012 4:08pm

Thx for sharing this
MCPat
April 5, 2012 6:39am

Today I ran into this same issue for #FF9900. I tried changing to #FF9901, tried putting the style: color in the TD element too. It doesn’t work with that color. Still keeps those links blue. I then put a <span> inside the <a> tag and added the color there. Still no dice. x0ax0aAny thoughts?

Blog