Grey Text on White Backgrounds

Pale, thin and hard to read

The body text on many recent sites is a mid grey, set in the light version of a fashionable font, on a white background. In the design presentation it looks calm and refined.

Then a customer in their sixties opens the site on a phone in a parking lot, and the paragraph about prices is a faint grey haze.

They tilt the screen, turn up the brightness, hold it closer. Some manage. Some phone instead and ask a question the page already answered. Some go elsewhere.

None of them will say the text was too light. If they say anything, it is that the site was hard to use.

Why it looked fine when it was approved

The design was reviewed on a large, bright, high-resolution screen, indoors, by people who already knew what the text said.

All three hide the problem. A sharp screen draws thin strokes cleanly, indoor light flatters low contrast, and familiar words are read from memory rather than from the page.

The people approving it are often younger than the customers, too, and eyes need more contrast as they age.

The test that matters is a different one: a stranger, an ordinary screen and ordinary light.

What makes text faint

Faint text is rarely one decision. It is several small ones that add up.

• Colour: a mid grey where a near-black would do.
• Weight: the light or thin version of the font.
• Size: body text set small to look neat.
• Rendering: Windows often draws thin web fonts more spindly than a Mac.
• Screens: an older office monitor or a budget phone.
• Light: sunshine on a phone, which washes out anything pale.

The second outlasts most colour fixes. A thin font in a perfectly dark colour still reads faintly, because there is so little ink in each letter.

Weight matters as much as colour

Most web fonts come in several weights, from hairline thin to heavy. Designs chasing a light, airy look often use the light weight for everything, paragraphs included.

For body text, the regular weight is the right default. It was drawn for reading at length. The light weights were drawn for large headings, where strokes are thick enough to survive.

Light weights also suffer most on ordinary screens. At small sizes on an older monitor, a stroke can be thinner than a pixel, and the screen draws it as a pale smudge.

Keep the elegant weight for the headline, where it has room, and set paragraphs, prices and hours in regular.

A darker grey still looks soft

Nobody has to switch to stark black. A dark charcoal grey reads almost as well and keeps the softer feel the designer was after.

The usual reference is WCAG 2.0, the accessibility guidelines most web professionals work to. On its contrast scale, body text needs at least 4.5 to 1 against the background.

Many fashionable greys on white fall well short, and a free contrast checker gives the ratio for any two colours in seconds.

Passing is a floor, not a guarantee. Thin weights and small sizes feel fainter than the number suggests.

A worked example

A tea room in a converted heritage house, a block off a small town's main street, serves afternoon tea by reservation, often to groups booking a birthday or a shower.

Its site was designed to feel delicate: a script font for the name, pale grey body text in a light weight, and plenty of white space around photographs of tiered stands.

The front desk kept taking the same calls. What does the afternoon tea include, what does it cost per person, can the kitchen manage gluten-free. All of it was on the site.

The reason became clear when the owner read the menu page on her own phone, outside, waiting for a delivery. The descriptions and prices had all but disappeared in the sun.

The fix kept everything that made the site feel like the tea room. The script stayed for the name and headings, while the paragraphs, menu and prices moved to a dark grey, the regular weight and a size larger.

Side by side in the office, the new pages looked almost the same as the old. Outside, only one of them could be read.

Size and spacing help too

Small text makes every other problem worse. Google's mobile guidance suggests body text of around 16 pixels, while many older themes use 12 or 13, which looks tiny on a phone.

Tight line spacing makes pale text harder still, because the eye loses its place on the way back to the start of each line.

Check it on real devices

The only test that counts is reading the site the way customers do. It takes half an hour and needs no software.

Open the site on the oldest Windows computer in the building, then on a budget Android phone, and on a small iPhone if anyone has one.

Take the phone outside at midday, with the brightness where the phone normally sets it. Read a full paragraph, a price list and the opening hours.

Then hand it to someone over sixty who has not seen the text before, and watch rather than ask. Squinting, tilting and holding the phone closer are your answer.

Where faint text hides

Body paragraphs are the obvious place, but the worst cases are often small items styled as secondary.

Opening hours in the footer. Prices in a lighter grey than the item names. Placeholder text inside form fields, captions under photographs, dates on blog posts.

Several of those are exactly what customers came for. A design that treats the hours as decoration has its priorities the wrong way round.

The counter-case

Not every pale element is a problem. Large headings can carry a lighter colour or weight, and decoration such as a faint pattern is not something people need to read.

If most of your customers are young and read indoors, complaints will be rarer, but some readers will still give up in daylight without saying so.

For anything people need to read, though, the rule holds: a dark colour, a regular weight and a sensible size, checked on real devices.

Making it readable

1. Read the site outside on a phone at midday.
2. Open it on an older Windows computer.
3. List every text colour the site uses.
4. Move body text to the regular weight.
5. Darken any grey below 4.5 to 1.
6. Set body text to about 16 pixels.
7. Ask an older customer to read a page.

Step four is the one most often skipped, because the colour gets fixed and the thin font stays. A dark colour in a hairline weight is still faint, so the weight has to change with it.

Small screens bring their own problems, covered in designing for the four-inch iPhone again.

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.