We have a newly created website, with lots of contact information for different employees. The color of the phone numbers in the website are all in black, except for when viewed on an iOS device,

When viewed on an iOS device the color for each contact number is gray, does anybody know how to correct this? And perhaps why this occurs?

  • I have added an update to my answer
    – markhunte
    Nov 9, 2014 at 10:17
  • thank you, I'm just waiting for our it guy to confirm it!
    – Macmaniman
    Nov 9, 2014 at 23:48

1 Answer 1


Have a look at phone-numbers-changing-to-unwanted-gray-color-on-iphone-and-ipad post.

It is possible that you have the same issue where you link color is what is determining the iOS color and you may need to setup a Browser Specific CSS plugin according to the post

Update: 9th Nov 2014

I found another post update-banning-blue-links-on-ios-devices which effected a change for a test phone link on my wordpress site.

Although the numbers where a light blue because they are being data detected.

This solution may or may not help you figure your issue.

In the post they offer various ways of achieving a change with various results.

Their favourite is the option 5.

Which is surrounding the number in a custom span class.

Declare you css classes as normal in your head:

.appleLinksWhite a {color: #ffffff !important; text-decoration: underline;} 
.appleLinksBlack a {color: #000000 !important; text-decoration: none;}
.appleLinksRed a {color: #FF0000 !important; text-decoration: none;}

and the surround the number in the chosen class

contact:<span class="appleLinksRed"> 0205 992 9921</span>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .