Text Somebody Can Read Without Zooming

Who cannot read your site

More people than the design was tested against, and the tester was almost certainly younger than the average customer.

Anybody over about forty-five is likely to need reading glasses, and a proportion are reading your site without them.

Anybody outdoors in daylight, where screen glare reduces effective contrast substantially.

Anybody with any degree of visual impairment, which is common and mostly uncorrected in ordinary browsing.

And anybody on an older phone with a smaller, dimmer screen than whatever the site was designed on.

The three failures

• Size, where body text is set too small.
• Contrast, where grey text sits on a white or coloured background.
• Weight, where a thin font makes both worse.

Contrast is the most common and the most consequential, because a colour that looks subtle indoors on a good monitor can be genuinely invisible on a phone in sunlight.

The three compound badly: small, light grey text in a thin weight is unreadable to a large share of visitors, where each element on its own would have been survivable.

The numbers

Worth stating, because they are specific and easy to check.

Body text at sixteen pixels or larger, which is the browser default and exists for a reason.

Contrast of at least four and a half to one between text and background for ordinary text, and three to one for large text.

A line length of roughly sixty to eighty characters, since very long lines are hard to track back from.

And a line height around one and a half times the font size, which affects readability more than people expect.

Those four cover the substance of it, and a site meeting them is readable by almost everybody.

Checking contrast

Not a matter of judgement, since the whole problem is that it looks fine to whoever chose it.

Free contrast checkers take the two colour values and return the ratio and whether it passes.

Browser developer tools include one, which reports the ratio for any text on the page directly.

That takes two minutes and produces a fact rather than an opinion, which matters because designers and clients frequently disagree about this on aesthetic grounds.

The common failures: light grey on white, white on a pale colour, text over a photograph, and a brand colour used for text that was designed for a logo.

A worked example

A business whose site used a mid-grey body text at fourteen pixels, chosen because black looked harsh.

It measured at about three to one, which fails.

An older customer mentioned during a quote that she had asked her son to read the website to her, which was how the owner found out.

Changing the text to a dark grey at sixteen pixels took ten minutes and measured over twelve to one.

Visually the site looked marginally less refined and considerably more legible, and nobody commented on the aesthetic change.

The owner's assessment was that the softer grey had been costing him customers in exactly the age group that could most afford his work.

Text over images

The hardest case and the most common on a homepage.

A heading placed over a photograph has variable contrast, because the photograph varies, and it frequently fails somewhere.

It also breaks unpredictably at different screen sizes as the image crops differently.

The reliable fixes: a solid or semi-transparent panel behind the text, a strong overlay darkening the whole image, or simply placing the text beside the image rather than on it.

A text shadow is the common attempt and is the weakest of the options, since it helps marginally and looks poor.

Links that are visible as links

A related legibility issue that catches people out.

Removing the underline from links, and colouring them only slightly differently from the surrounding text, makes them invisible to anybody who cannot distinguish the two colours easily.

Colour alone is not sufficient to mark a link, for the same reason it is not sufficient to mark anything else.

An underline is the reliable indicator, and it is worth keeping in body text even where a designer would rather not.

In navigation, where position makes the function obvious, the rule is looser and the colour requirement still applies.

The counter-case

Where smaller or lighter text is acceptable.

Genuinely secondary information: a copyright line, a caption, a legal footnote that nobody needs to read at a glance.

Disabled or placeholder text within a form, which is expected to be lower contrast and has its own conventions.

And decorative typography that is not conveying information, where the words also appear elsewhere as readable text.

What is never acceptable is body text, headings, links, phone numbers or anything a customer needs to act on.

Letting people zoom

A setting worth checking, because some sites actively prevent it.

A tag in the page can disable pinch zoom on a phone, and it was widely used at one point to stop layouts breaking.

The effect is that anybody who needs to enlarge text cannot, which for some visitors makes the site unusable entirely.

It is a single line to remove and most modern themes no longer include it, which makes checking a two-minute task.

A site that lays out properly has no need to prevent zooming, and one that genuinely needs to has a different problem underneath.

Respecting the reader's own settings

The part that is invisible until somebody who needs it arrives.

People set a larger default text size in their browser or phone, and a well-built site respects it by scaling accordingly.

Sites that specify text in fixed pixel sizes throughout ignore that setting entirely, which means the person who deliberately made text larger sees no change.

Using relative units instead means the site honours whatever somebody has chosen, at no cost to anybody else.

That is a build decision rather than a design one, and it is worth asking about when commissioning a site, because retrofitting it later is more work than doing it correctly.

What to check

1. Body text at sixteen pixels or more.
2. Contrast measured, not judged.
3. Text over images checked at several widths.
4. Zoom not disabled.
5. Read it outdoors on a phone.
6. Ask somebody over sixty to read a page aloud.

The sixth is uncomfortable and it is the only test that reflects how a substantial share of customers actually experience the site.

The related question of describing images is covered in describing an image for somebody who cannot see it.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.