css - HTML email link color dilemma

Question

I designed an HTML email and I am having the following issues: First my entire design is based on a blue color so any blue text will not be readable by the reader/user, text has to be white. GMAIL automatically color phone numbers and links blue but the main problem is Microsoft Outlook OWA.

To fix the phone number and link coloring in GMAIL I did the following:

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

This works perfectly for GMAIL and every where else BUT as I mentioned most of my client uses Outlook or MS OWA (Outlook Web Application).

OWA ignores the color I set in my inline style and makes the link default blue; this only happens when the email is previewed. If you actually open the email all the styles kicks in.

My dilemma is, what should I do? I have already given up hope but this is my last resort. Is there a way to override the link color for Outlook OWA? I have used !IMPORTANT, the FONT tag, NESTING to the 5 degree.

The Problem here is not Outlook but OWA.

Here is a screenshot when I inspect the element in Chrome:

And here is FF:

Any ideas?

Please!

Answer 1

You'll find success by including the <font> declaration, which is deprecated in modern HTML, though some versions of OWA still respect it:

<a style="color: #FFFFFF; text-decoration: none" href="#/">
  <span style="color: #FFFFFF; text-decoration: none">
    <font color="#FFFFFF">1800-000-0000</font>
  </span>
</a>