Banning Blue Links on iOS Devices

[ 0 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:


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:


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;}


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.


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;}


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.


As an added bonus, all other URLs that are automatically linked in iOS (note the multiple mentions of 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 →