Insights
Why Half Your Visitors Can’t Read Your Phone Number
The phone number is the most important thing on most small business websites. It is also, on a surprising number of them, the hardest single thing to read.
It is usually set in light gray. It usually lives in the footer or a thin bar at the top, in small type, in the same muted color as the copyright line and the cookie notice. That color choice quietly tells a visitor’s eye that this is housekeeping, not the thing they came for. On a designer’s monitor in a dim studio, gray on white looks calm and modern. On a kitchen laptop with the overhead light on, read by someone in their sixties who came to your site for exactly one reason, it looks like a smudge.
I want to walk through why this happens, because it is almost never carelessness. It is usually a chain of reasonable decisions that add up to an unreadable result.
Gray Text is a Borrowed Habit
Around the mid-2010s, the big design systems at Google and Apple shifted toward muted grays for body text, and the rest of the web followed. That habit moved down from the design systems into templates, themes, and page builders, and quietly settled in as the house style. Most people setting up a small business site never chose gray on purpose. It came with the theme.
The trouble is that the standard for readable text has a number, and a lot of gray falls below it. Text is considered comfortably readable when it has a contrast ratio of at least 4.5 to 1 against its background. Pure black on white is about 21 to 1. The medium gray you see on a thousand sites is often closer to 2.5 or 3 to 1, which reads fine on a designer’s bright monitor in a quiet room and starts to dissolve for anyone reading in real-world light with real-world eyes. You can check any color pair in seconds with WebAIM’s contrast checker.
Small is a Desktop Illusion
The second half of the problem is size. Sites get built on large monitors, where 14-pixel text looks tidy and a phone number tucked into the footer looks balanced. Then the person who actually needs that number opens the page on a phone, or on a laptop pushed back on the counter while they wash up, and 14 pixels is suddenly a squint.
The people most likely to call you rather than fill out a form are also the people your designer is least likely to be designing for. Most designers are in their twenties or thirties. Most callers, in the businesses I work with, are in their fifties or sixties. Near vision shifts in the forties, and contrast sensitivity continues to ease off after that. That is ordinary, not a deficit. The problem is that defaults built around a thirty-year-old designer’s eyes silently exclude the visitors who actually buy from you. If you have not adjusted those defaults, half of your callers struggling with your contact details is a conservative estimate.
The Thirty-Second Test You Can Run Right Now
You do not need a tool for this. Pull your site up on your phone, hold it at arm’s length, and look for your phone number. If your eye does not land on it inside a second or two, that is your answer. For a slightly more honest version, ask one of your actual customers, ideally from the older end of your typical range, to find your number on your site while you watch. Say nothing. The first place their finger hesitates is your fix list.
If you want to see the mechanical version of what they experience, your browser can fake it for you. I wrote up the three-click method in How to Test Your Website’s Readability in 60 Seconds.
What Actually Moves the Needle
The fixes here are small and boring, which is exactly why they get skipped.
Darken it. Move your contact text close to true black. Something like #1a1a1a on white sits well above the 4.5 to 1 line without the harshness of pure black on pure white. The number that lets someone call you should never be the same color as the copyright notice.
Size it like it matters. Body copy at 17 or 18 pixels instead of 14. Your phone number, hours, and address are not fine print. Sizing them like fine print tells the visitor they are not the point.
Give it room. A phone number wedged between two other lines is harder to grab than one sitting in its own space. A little breathing room does as much for readability as a color change.
None of this requires a redesign. It is usually a handful of values in your theme settings.
The Visitors You Will Never Hear From
Here is the part that makes this worth your attention. Nobody emails to say your phone number was too faint. They do not file a complaint. They find a competitor whose number they could read on the first try, and you never learn the call existed. The cost is invisible, which is exactly what makes it easy to ignore for years.
Fixing your defaults handles most of this. But some of your visitors are reading through migraines, through tired end-of-day eyes, through vision that shifted last year, and no single set of defaults is right for all of them at once. That is the gap I built EasyNav to cover: a quiet button in the corner that lets a visitor bump the text up or sharpen the contrast on your site, without you having to guess which setting suits which person. Get your defaults right first. Let EasyNav handle the long tail of eyes you cannot design for one at a time.
The bigger idea, that accessibility is a foundation you set yourself rather than a widget you bolt on, is in The Foundation and the Overlay. For the full checklist of common accessibility issues and how to fix them, see The Website Accessibility Checklist.