How to prevent clicked hyperlinks in HTML emails from turning purple

Have you ever created a beautiful email from scratch, test it, discover that it works across all email clients and devices that you need it to, only to discover when you are testing your hyperlinks, that after tapping, or clicking, that they turn purple?

Over the past few years, I have used many email platforms, such as Litmus, Constant Contact, Bronto, etc. to send and test HTML emails. When testing hyperlinks on several email clients, I can’t help but notice the fact that my hyperlinks turn purple.

It took some trial and error to figure out how to make this go away, and thankfully, up until now, the problem no longer seems to happen, at least on email clients or devices that I have been specifically asked to test with.

Below is a sample snippet of HTML code and the resulting output for common footer hyperlinks that I normally have to use when developing emails for healthcare marketing clients:

<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#">Privacy Notice</a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#">Unsubscribe</a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#">Terms of Use</a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#">Legal Notice</a> | 
  </td>
 </tr>
</table>

Here is what the Privacy Notice hyperlink normally looks like after you click on it in an email.

Despite setting the color on the parent element for all the hyperlinks, and individually on each anchor element, the color still changes.

My first thought was to try something more specific and surround the inner text of the anchor element with a <span> and give it an inline CSS style as shown below:

<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Privacy Notice</span></a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Unsubscribe</span></a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Terms of Use</span></a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Legal Notice</span></a>
  </td>
 </tr>
</table>

To my surprise, that did not prevent the links from turning purple.

I started researching online, and at the time, the solutions I found recommended using a element like I had tried, or did not help at all. So I decided to play around with other inline HTML elements such as <b> and <i> until I found one that worked, which came with a little side effect, the <strong> element. That side effect being that the inner text was now bolded.

Thankfully, negating the effect of the element by using inline CSS as shown below, it worked for me.

Solution

<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;font-weight:normal;">Privacy Notice</strong></a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;font-weight:normal;">Unsubscribe</strong></a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;font-weight:normal;">Terms of Use</strong></a> | 
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;font-weight:normal;">Legal Notice</strong></a>
  </td>
 </tr>
</table>

To this date, this solution has worked well for me. There may be other or better solutions out there now, especially since I have been using this for several years now.