A Painter Site You Have to Squint to Read

The site

A painting contractor with two crews does interior and exterior repaints, mostly on houses built in the seventies and eighties.

Its website is designed to feel light and clean: pale grey body text on white, in a thin font, with every headline in white across a wide photograph of a freshly painted house.

The photographs are good, all crisp white trim and blue sky on bright days, because that is when exteriors look their best.

The phone number is down in the footer, in the same pale grey, a size smaller than everything else. On the office monitor, the whole thing looks calm and expensive.

The inference a visitor makes

The typical visitor is standing in a driveway looking up at peeling trim, phone in hand, in daylight. Many are older homeowners, since a repaint tends to come after years in the same house.

In the sun, the white headline merges into the white trim behind it, and the paragraph below is a grey haze.

Nobody concludes the contrast is too low. They decide the site is hard to use, or neglected, and return to the results, where another painter reads at a glance.

There is a sharper inference too. A painter sells how things look, and a site that is hard to look at suggests a contractor who does not think about the person looking.

Where the words fade

• Body text in a light grey chosen for the design, not the reader.
• Headlines in white laid across photographs of pale siding and sky.
• The phone number in small pale type at the very bottom.
• Form labels written as grey hint text inside the boxes.
• Buttons with white lettering on a soft yellow brand colour.
• Captions under project photos, in grey italics, smaller still.

The third is the one that costs calls. Someone who has already decided to ask for a quote still has to read the number, and it is the faintest thing on the page.

Contrast, explained

Contrast is the difference in lightness between letters and whatever sits behind them. Hue matters less than people expect: dark red on white reads well, pale grey on white does not.

WCAG 2.0, the main web accessibility standard, measures it as a ratio: 1 to 1 for white on white, up to 21 to 1 for black on white.

Body text should reach at least 4.5 to 1, and large headings at least 3 to 1. The pale grey here measures under 3 to 1, which a free contrast checker reports in seconds from the two colour codes.

Sunlight lowers the contrast of everything on a screen, so a page that barely passes at a desk fails in a driveway.

White words on fresh paint

White text over a photograph has no single contrast ratio. Over a dark hedge the headline reads; over white trim or pale sky it vanishes, sometimes in the middle of a word.

A painter's portfolio is the worst case, because the best photographs show light surfaces in bright weather. The work the business is proudest of is exactly what erases its headlines.

The phone moves the headline

On the office monitor, the main headline sat over a patch of dark shrubbery, and it was approved there.

A phone narrows the page. The headline wraps onto three lines, the photograph is cropped to a different shape, and the words land somewhere else, usually across the sky.

Every screen width puts the words over a different part of the picture, so the reliable fixes are the ones that do not depend on where the words fall.

A worked example

The owner found out by accident. A homeowner phoned to ask whether the company painted exteriors, which was the headline across the first photograph. She had given up on the site and found the number on a truck.

He opened the site on his own phone in the driveway and could read almost nothing: the headline lay over the sky, the paragraphs were haze, and the footer looked empty.

The fix kept the design. Body text became a dark charcoal in the regular weight, one size larger, and each headline moved off its photograph into a band of the company's deep blue below it.

The photographs stayed full width with nothing written on them. The phone number went into the header in dark type, and the quote form got real labels above each box.

The site still looks light and clean. The airy feel had come from the white space and the photographs all along, not from the pale text.

Thin letters and small type

Colour is only part of it. The font is a light weight meant for big headings, used here for every paragraph, and fine strokes make any colour look paler.

The paragraphs are also 13 pixels, fine at a desk and a strain at arm's length. Google's Mobile-Friendly Test, which matters more from April 21, already flags text too small to read on a phone.

Keeping the look

None of this calls for a stark black-and-white site. A very dark grey or a deep shade of the brand colour reads almost as well as black and keeps the softness.

Take words off bright photographs. Set them in a solid band beside or below the image, or lay a dark, partly transparent layer behind the text, so the ratio holds wherever the words land.

Keep soft brand colours for large shapes and backgrounds. Pale colours make good backgrounds and poor lettering, so buttons get dark text or a deeper shade.

The counter-case within the site

Not every pale element is a fault. The logo is exempt from the contrast guidelines, and decoration nobody needs to read can stay light.

White text over a photograph can work when the image is dark everywhere the words might land, at every width. An evening shot of a lit interior might qualify; a sunny exterior almost never does.

For anything a customer needs to read, the advice stands: dark text in a regular weight, words off bright photographs, and a check outdoors on a phone.

What to change

1. Read every page outdoors on a phone.
2. Darken the body text to a near-black charcoal.
3. Use the regular weight for paragraphs, one size up.
4. Move headlines off bright photographs into solid bands.
5. Put the phone number at the top in dark type.
6. Give every form box a visible label above it.
7. Check each colour pair with a contrast checker.

Step four is the one most redesigns skip, because the photograph is the part everybody likes. Taking the words off it keeps the photograph and makes the headline readable at every width.

The reverse problem, one that shows only on a wide monitor, is covered in lines of text that run the width of the screen.

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.