Making your website easy to read for everyone

A readable website is one a customer can read on a phone in bright sunlight, without glasses, without zooming in. Most of that comes down to four things you can check yourself in ten minutes: how dark the text is against its background, how big the letters are, how long each line runs and how plainly the words are put. None of it needs a designer's eye, and fixing it helps every visitor, not only older ones.

Why readability matters more than looks

People rarely leave a site because the colors are dated. They leave because they squinted, gave up and tapped back to the search results to try the next business. A pale gray sentence on a white background may look elegant on the designer's large monitor, and it is close to invisible on a phone at a bus stop.

Your customers are also not all the same reader. Some have reading glasses in another room. Some have mild color blindness. Some read English as a second language. Some are tired after a shift. A page that works for all of them is simply a page that works.

Contrast: dark on light, and dark enough

Contrast is the difference in brightness between the letters and what is behind them. It is the single most common readability problem on small-business sites.

What to look for:

Body text should be near-black on white or a very light background. Dark charcoal is fine. Mid-gray is not.
No text over busy photos. A headline on top of a photo of your shop looks good until the white letters land on a white truck in the picture. If text sits on a photo, it needs a dark band or shading behind it.
Links should look like links. A link in a pale color that only differs from the text by its hue is hard to spot for anyone with color blindness. Underlined links are the safe choice inside paragraphs.
Buttons need readable labels. White text on a light orange or yellow button is a common miss. Dark text on a light button, or white text on a dark one.

The web's accessibility guidelines, published by the W3C, set a minimum contrast for normal text of 4.5 to 1. You do not need to measure it by hand. Free contrast checkers let you type in two colors and tell you whether they pass. If your designer chose your colors, ask them to confirm the body text passes that minimum.

Text size: bigger than you think

On a phone, body text below 16 pixels makes people pinch and zoom, and many will not bother. For a business whose customers skew older, 17 or 18 pixels reads more comfortably. Headings should be clearly larger than the body so the eye can scan the page.

How to check without any tools: open your site on your own phone, hold it at a normal distance and read a full paragraph of your services page. If you catch yourself bringing the phone closer, the text is too small. Then ask someone older than you to do the same.

Two related things to watch:

Light, thin fonts. A font can be the right size and still be hard to read if its strokes are hairline thin. Regular or medium weight for body text, not light. More on picking typefaces in choosing fonts for a small business website.
All capitals. A sentence in capitals is slower to read. Keep capitals for short labels, if anywhere.

Line length and spacing

On a computer screen, a paragraph that stretches the full width of a wide monitor is tiring: the eye loses its place jumping back to the start of the next line. Comfortable lines are roughly 60 to 75 characters long, which is about the length of this sentence plus half again.

Spacing helps as much as size:

Space between lines of about one and a half times the text size keeps lines from blurring together.
Space between paragraphs so each one reads as its own thought.
Short paragraphs. On a phone, a paragraph of eight lines on a computer becomes a wall of twenty. Two to four sentences per paragraph is plenty for a website.
Left-aligned text. Centered paragraphs are hard to read because every line starts in a different place. Center a headline if you like, not a paragraph.

Plain words and a clear order

Readability is not only about the letters. A page full of trade jargon is unreadable to the customer even when the font is perfect.

Say what you do in the words a customer would use when calling. "We fix leaking roofs" beats "comprehensive roofing envelope solutions".
Put the most useful fact first in every section: what it is, what it costs or how to book.
Use headings that describe what follows, so someone scanning can jump to the part they need. Using headings so visitors can scan your page covers how.
Write numbers as numbers: "open 7 days", "call 555-0142".

Things that make reading harder than it needs to be

A few habits on older and template sites get in the way of reading:

Text inside images. A flyer saved as a picture and placed on the page cannot be enlarged cleanly, cannot be read aloud by a screen reader and blurs on phones. Put the words on the page as real text.
Moving text. Sliders that change every few seconds, scrolling banners and flashing "new" badges pull the eye away from what the customer is trying to read.
Tiny gray footers with the phone number and address. That is often the information people came for. It deserves normal size and full contrast.
Zoom blocked. Some old sites stop people from pinching to zoom on a phone. Visitors who need to enlarge text then cannot. Whoever maintains your site can switch that off.

If your customers are mostly older, redesigning a website for older customers goes further on tap targets, menus and forms.

Is this an accessibility or legal matter?

Readable text is part of making a site accessible to people with disabilities, and the guidelines above come from that work. Whether and how disability law applies to a particular business website is a question for your attorney, not a blog post. What owners commonly do is fix the basics first: contrast, text size, real text instead of pictures of text, and descriptions on photos. Website accessibility for small businesses: where to start lists the next steps.

A ten-minute readability check

Do this on your own phone, outdoors if you can:

Open your home page. Can you read every sentence without zooming?
Is any text pale gray, or sitting on top of a photo without a dark band behind it?
Can you tell which words are links?
Are the button labels easy to read?
Do paragraphs run longer than four sentences on the phone screen?
Is any important information, like hours or prices, inside a picture?
Is the phone number in the footer the same size as the rest of the text?
Hand the phone to someone over sixty and ask them to find your hours. Watch where they struggle.

Each "no" on that list is usually a small fix for whoever looks after your site. If the list is long and the site is old, it may be quicker to see your site rebuilt first with readable text from the start, and compare the two side by side on your phone.