Banning Blue Links on iOS Devices

[ 39 By
We revisited this post, testing all the suggestions we received from readers. See the updated post and test results.

Links have been blue since the internet was born (rumor has it that Tim Berners-Lee styled the first web links blue). While they do provide a nice contrast from black text on a white background, not all designers favor that lovely shade of #0000FF.

While it’s fairly simple to switch up regular link colors in your <a> tags, iOS has a mind of its own. It’s not uncommon to find phone numbers, addresses, and dates styled blue complete with an underline indicating a link when viewing email on an iPhone or iPad. These links trigger different types of events based on the pattern detected in the text (making a call, launching a map, or creating a calendar event).

Here’s a couple examples comparing the same email viewed on an iPhone versus in Gmail:

iOS-examples.jpg

Sure, these blue links can be annoying, but they can also create readability challenges. Litmus fan Tony Linnabery pointed out in a recent blog post that a phone number in his email had changed to blue text on a dark background – not exactly easy on the eyes. Turns out, it’s fairly straightforward to swap all your blue iOS trigger links back to their intended color.

Here’s my control email, a simple email with some example text that frequently ends up as blue links in iOS:

iOS-v1.jpg

Tony’s solution involves adding a simple bit of embedded CSS in the <head> of your HTML. While using inline CSS is usually the way to go with email, the native mail client in iOS supports embedded style sheets. My email required two different link colors, so I added one class for my regular black text and a second for my high-contrast text at the bottom:

<style type=”text/css”>

.appleLinks a {color:#000000;}

.appleLinksWhite a {color:#ffffff;}

</style>

Then I wrapped the offending blue text in <span> tags with the appropriate class:

<span class=”appleLinks”>863985624</span>

Awesome! My blue links are now the appropriate colors, but they still have underlines.

iOS-v2.jpg

I tried again, only adding a style to remove the underline on the links:

<style type=”text/css”>

.appleLinks a {color:#000000; text-decoration: none;}

.appleLinksWhite a {color:#ffffff; text-decoration: none;}

</style>

The formerly blue and underlined text now blends with the rest of my design, and my high-contrast text has regained readability. It’s important to note, however, that each of the formerly blue links is still active. They simply blend into the surrounding text a bit better than before. One errant tap or accidental swipe could still trigger these links.

iOS-v3.jpg

As an added bonus, all other URLs that are automatically linked in iOS (note the multiple mentions of Folica.com in the example above) have been changed to black as well. You can also take a look at my blue-free email as viewed across all major email clients.

While you might not always be able to predict what types of information may end up as a link on an iOS device, taking a quick look at your Email Previews in Litmus will tip you off to the offending text so you know where to add in the fix. In my experience, you’ll probably want to wrap the following types of text:

  • Dates (only dates in the future seem to trigger the calendar links)
  • Addresses (commonly found in the footer to comply with CAN-SPAM)
  • Phone numbers, confirmation codes, frequent flyer numbers

I also did a little digging in the iOS Developer Documentation. While there is a solution for disabling phone number detection in Safari on iOS, it sadly does not seem to extend to the native Mail client on the phone. Even when accessing my mail via the Safari browser on the iPhone, phone numbers continued to turn blue and trigger a call action when touched on the screen. However, if you’re developing web sites that will be viewed in Safari on an iOS device, it may be worth a look.

What do your links look like on iOS devices?

Test your emails on iOS devices, plus 30+ other desktop, webmail, and mobile clients, with Litmus to see how your emails (and links!) are rendering. Sign up for a free 7-day trial today!

Start testing →

  • http://twitter.com/kaspersteen Kasper Steen

    Nice :-)

  • http://twitter.com/redhoteshot Red Hot Eshot

    There’s easier way to tackle the link colouring than wrapping all the links with spans. Just style all the links in the header with !important attribute. For example a{color:#ffffff !important;}.nIf you need different override colours for different areas, just target those additionally with classes, for example .footer a{color:#ffffff !important;}

  • Pingback: Formate os links do seu Email Marketing

  • http://twitter.com/edarias Eduardo Arias

    Thanks for this!

    • http://www.litmus.com Justine, Litmus

      Glad it was helpful, Ed! :)

  • Dinovici

    Awesome tricks! Thanks for sharing, it did the job of fixing of all these nasty blue “links” Apple devices are creating. Thanks again!

  • http://ashuttleworth.com/ Andrew Shuttleworth

    Could you have used color: inherit; instead?

  • Sam Barkley

    That was very helpful and easy! Thank You

  • http://twitter.com/JonathanDrake Jonathan Drake

    the link is no longer working “You can also take a look at my blue-free email as viewed acrossall major email clients”

    • http://www.litmus.com Justine, Litmus

      Sorry about that Jonathan. Since the post is more than a year old, it’s linking to a result in my own Litmus account that has since been archived! 

      I’ve just re-run the test. You can see the results here: https://litmus.com/pub/000451a/screenshots

  • http://profile.yahoo.com/YAVT2EW5R2C5M5HJULYLAV2MNI Terri

    I have the style/css declaration in the head before the

    .appleLinks a {color:#cc0000;}
    .appleLinksWhite a {color:#ffffff;}

    and have wrapped my iOS blue link text in the posted span tags

    phone #

    address here

    but after testing they are still blue

  • http://profile.yahoo.com/YAVT2EW5R2C5M5HJULYLAV2MNI Terri

    Ok I am confused too because I used this about a week or so ago and it worked in my Litmus tests. But in clicking your link below in response to Justin all the iOS links in your test are still blue. Not styled like in the post above.

    I wonder if something has changed in the past week?!

  • http://profile.yahoo.com/YAVT2EW5R2C5M5HJULYLAV2MNI Terri

    Sorry bout’ all these but Disqus isn’t letting me edit my posts.

    renamed/resaved my file reuploaded and now it seems to be working.

    • http://www.litmus.com Justine, Litmus

      So glad you got it working, Terri!

  • disqus_ryan

    Thanks! Took this slightly further based on your tip:

    Instead of wrapping every possible item that iOS may try and style like a link with a SPAN and inline style, just add a rule to the document’s block
                a {                color: #333333 !important;                text-decoration: none !important;            }

    and where you DO have links, override this rule with an inline style.

    Chances are you have fewer actual links you want to appear as links than things that iOS has helpfully styled as links automatically.

    It’s bad enough that for GMail et al we must spam our tags with inline styles.

    • http://www.litmus.com Justine, Litmus

      Thanks! Since we frequently have emails with different colored text/links, I find it’s best to wrap specific sections based on testing. But this will be helpful for simpler emails!

  • http://www.wpguru.com.au/ Robin Thebs

    Great Info.
    Thanks for the blog post and all contributors.

  • http://www.facebook.com/profile.php?id=1099320036 Josh Nederveld

    Yeah, this isn’t working in any of my tests.

    • http://www.litmus.com Justine, Litmus

      Sorry to hear that, Josh. We’ve been successfully using this method on all our outgoing emails. I’d double check that your classes are correct and you’re using the right colors (I use black and white in my examples, but your links might be different colors). You can post a link to your code or Litmus test here and we’ll try to take a look!

      • http://gre.gs/ Awfy

        I seem to be having the same troubles as Josh. Unfortunately even when I wrap the offending lines of text in a span with the corresponding class name they still show up blue in Litmus tests. Any idea if this “fix” has since been blocked by Apple?

        • http://www.litmus.com Justine, Litmus

          I continue to use the fix with success. You can take a look at an example here, where it’s used toward the bottom on dates and a phone number: https://litmus.com/scope/mrtlgthvmyhx

  • Marek Zeman

    Actually the best way is to use this everywhere you have written phone number or simply on top of your CSS:

    a[href^="tel:"] {
    color: inherit
    }

    which means … every link beginning with “tel:”
    because iOS converts: +420-777123456
    into this: +420-777123456

    • Mark Hofhuis

      I cannot seem to get this to work in Apple Mail. I am editing the .mailsignature file to even be able to get the HTML inserted into Apple Mail.

      All other options dont seem to work anymore.

      Currently I have this as the top of my .mailsignature file:

      Content-Transfer-Encoding: 7bit
      Content-Type: text/html;
      charset=us-ascii
      Message-Id:
      Mime-Version: 1.0 (Mac OS X Mail 6.3 (1503))

      appleLinks a {
      color:#888888;
      text-decoration: none;
      }

      .appleLinksWhite a {
      color:#ffffff;
      text-decoration: none;
      }

      a[href^="tel:"] {
      color: #888888
      }

      and the rest of the email.

      • http://www.litmus.com Justine, Litmus

        Hi Mark, this fix is specific to receiving emails on iOS (iPad and iPhone). Are you sending your emails from Apple Mail? If so, I would suggest using an email service provider (such as MailChimp or Campaign Monitor) for tighter control of your HTML and CSS.

        • Mark Hofhuis

          Hi Justine, thanks, I know that that gives me more flexibility. The thing is that we use the HTML as an E-mail signature.

          What I am doing now is using the Zero Width Space character ( ​ ) in between characters of the address so iOS does not recognise it as such.

          On top of the HTML I have:

          appleLinks a {
          color:#888888;
          text-decoration: none;
          }

          .appleLinksWhite a {
          color:#ffffff;
          text-decoration: none;
          }

          a[href^="tel:"] {
          color: #888888
          }

          Not too nice, but it seems to do the job.

        • francesca

          Hi Justine, I have this problem using Mailchimp drag&drop (no
          tag so I can’t apparently use your solution)… do you (or
          others) know how to fix it?I am not a developer just a standard user.

      • Ryan Dagner

        Is there other coding that might offset the meta tag? I’ve used the meta tag successfully before but it’s not working in the email I’m coding now.

    • http://www.litmus.com Justine, Litmus

      Thanks for sharing, Marek! Seems like a good solution for phone numbers. Dates and addresses may still need to be manually corrected using span tags, though.

      • Marek Zeman

        Don’t know but I’ll check it ;)

  • sugerpiee

    found this meta-tag simply deactivating apple’s blue code highlighting for the entire page – worked fine for me in web and html mails

    • http://www.litmus.com Justine, Litmus

      Thanks for sharing! Seems like another great solution for tackling phone numbers! Does it work for addresses, too?

      • sugerpiee

        looks like the above meta-tag only fixes nuber issues ( http://bit.ly/17scvLf ) … just ran some tests on iOS 6.1.2 and adresses were hightlighted in colors i had defined in CSS for the different block elements like..

        .divName a {color:#000;}

        but that’s maybe only an option for people who want to keep the highlighting feature. didn’t find anything deactivating the adress linking in general jet.

    • Ryan Dagner

      Is there other coding that might offset the meta tag? I’ve used the
      meta tag successfully before but it’s not working in the email I’m
      coding now.

      • http://www.litmus.com Justine, Litmus

        Hi Ryan, we’re doing some testing on this and a few other solutions this week. Stay tuned for an update!

      • sugerpiee

        maybe you can share your header and the styling for some testing?

    • http://freenish.com/ Freenish

      This method only can remove the link color of number, if the link is address, it won’t work

  • Miguel Bocquier

    It works for me ! Great thank you so much ! :D

  • alluremail

    Found at – http://www.industrydive.com/blog/how-to-fix-email-marketing-for-iphone-ipad/ – Possibly the easiest fix is to add in a couple “Zero Width Space” characters (&#8203) amongst dates and addresses. This character is totally invisible in every email client and browser but it stops the iPhone date/number/address detection.

  • Jason

    This method is termperental, it works then it feels like it… any thoughts? I have done everything to the letter, but I will be damned it I can get it to work…