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

Answer 1

OWA is actually stripping all the styles of the a-tag, including that of the span-tag you included. You can add styles in the head part, but again, OWA is ignoring this for hyperlinks. I added a style for a, a:link, a:visited in the head, the same color as in the a-tag and the including span-tag. The result? My linktext is colored but the underlining is still the default blue. The clue: there's no clue for me.

Answer 2

This question is still relevant as of today 21-12-2017. I had no problem with my code in Outlook, Gmail but not in Outlook Web App. I had to use this outdated tag to solve it.

<a class="app-link" style="font-size:14px; color:#ff6600 !important; text-decoration:underline;" href="https://somesite/something/"><font color="#ff6600 !important;"> Gå til app</font></a>

It was weird that style within hyperlink will NOT work for Outlook Web App(OWA), therefor, adding <font color="#ff6600 !important;"> worked! Strange but this is how Microsoft wants to tease us!

Answer 3

Its a known bug with Outlook that if an anchor tag does not contain a valid URL, then the styling of said tag will be ignored.

The tendancy to add !important will also work against you in this case because Outlook will completely ignore any tags suffixed with !important.

Put a URL on your anchor tag, or wrap the text in a span tag inside of the anchor and put your styling there.

Answer 4

<a href="#" style="color: #FFF;">
  <strong style="color: #FFF; font-weight: normal;">Example Link</strong>
</a>

it worked for me! Make sure to use <strong>, I tried it with other tags, but that didn't work.

Answer 5

Outlook Web App (OWA) link colors change from inline styles. I have spent a few hours trying to change/fix link colors in OWA where it strips away inline styles for email templates I am creating. I tried various techniques with + tags with no success. Finally found something that seems to work:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

Changed it to:

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

Seems fine so far.

Further testing. I put the slightly off color on the the <td style="color:#FFFFF6;"> then the correct color on the <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">

Answer 6

I have been able to fix this by putting a table inside the a tag.

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>