Reading Your Site in Bright Sunlight

Where people actually read your site

Not at a desk, in a controlled room, on a calibrated monitor.

In a car park before going into a shop. On a driveway looking up a tradesperson. Standing outside a restaurant deciding whether to go in. On a bus, on a site, in a garden.

Many of those are in daylight, on a screen dimmed to save battery, held at an awkward angle, sometimes through sunglasses.

A design decision made in an office is being tested in conditions the office never reproduces.

What sunlight does to a screen

Ambient light does not darken a screen so much as wash it out.

Bright light reflecting off the surface adds brightness to everything, which raises the dark areas more than the light ones and compresses the difference between them.

The effect is that subtle distinctions vanish first. Text that is dark grey against white survives. Text that is light grey against white becomes an even field.

Phones compensate by increasing brightness automatically, which helps and does not solve it, and a phone at twenty percent battery is often not doing it at all.

The style that fails

• Light grey body text on white, the most common by far.
• White text on a photograph, where the photo has bright areas.
• Pale text on a coloured brand background.
• Thin fonts, which lose strokes before they lose contrast.
• Placeholder text in form fields, which is deliberately faint.
• Disabled buttons, greyed until they become invisible.

The first is fashionable, looks considered on a monitor, and is the single biggest cause of a site being unreadable outdoors.

The measurable version

Contrast between text and background can be measured as a ratio, and the accessibility guidelines set thresholds that are worth using as a design floor.

Ordinary body text should reach a ratio of about four and a half to one against its background. Large text can go lower, around three to one.

These exist for readers with reduced vision, and they happen to describe almost exactly what everybody needs outdoors, which is a useful coincidence: designing for the first case solves the second at no extra cost.

Free contrast checkers will give you the number for any two colours in a few seconds, and browser auditing tools will flag failing text across a page automatically.

Thin fonts fail differently

Worth separating from contrast, because a page can pass a contrast check and still be hard to read.

Light and thin font weights have less ink on the screen, so there is physically less of each letter to survive the wash-out.

At small sizes on a phone, a thin weight in a mid grey can be technically compliant and practically illegible in daylight.

The fix is usually a heavier weight rather than a darker colour, and it costs nothing visually. Body text at a normal weight looks entirely ordinary and holds up in conditions where a lighter weight does not.

A worked example

A garden centre had a site with light grey text on white, a thin typeface, and a homepage banner carrying white text over a photograph of plants.

It looked calm and current on a desktop.

Staff began noticing customers in the car park holding phones at odd angles and shading the screen with a hand while trying to check opening hours.

Testing it outdoors confirmed the obvious: the hours, in grey on white, were essentially unreadable in direct light, and the banner text vanished entirely against the brighter parts of the photograph.

They darkened the body text substantially, moved the typeface up a weight, and put a solid panel behind the banner text rather than placing it directly on the image.

Nothing about the design's character changed noticeably indoors. Outdoors it became legible, and the hours moved into a plain dark block near the top of the page.

Text on photographs

The specific case that causes the most trouble, because it fails unpredictably.

A photograph has bright and dark regions, so white text over it has good contrast in some places and none in others, and which is which changes with the screen size as the image crops differently.

The reliable solutions are all forms of not relying on the photograph. A solid or semi-transparent panel behind the text, a strong darkening overlay across the whole image, or text placed beside the image rather than on it.

A subtle gradient is the usual compromise and it frequently is not enough outdoors, where the photograph itself is being washed lighter along with everything else.

Do not rely on colour alone

A related point that daylight makes worse.

Where colour carries meaning, such as a red field indicating an error or a green tick indicating success, washed-out conditions reduce the difference between hues as well as between light and dark.

Add a second signal: an icon, a word, an underline, a border. Error messages should say what is wrong in text rather than only turning a field a different colour.

This is standard accessibility practice for readers who cannot distinguish certain colours, and it is the same fix that keeps a form usable on a phone in a bright car park.

How to test it

Go outside with the site open, which takes two minutes and is more convincing than any measurement.

Set the screen brightness to about half rather than maximum, since that approximates a phone conserving battery and a phone that has not yet adjusted.

Check the things people look for outdoors specifically: opening hours, the address, the phone number, and any form field they might complete standing up.

Do it on a cloudy day as well as a bright one, because indirect daylight is far brighter than an office and is the more common condition.

The counter-case

Maximum contrast everywhere is not the goal either.

Pure black on pure white at full brightness is harsh, and some readers find large areas of it genuinely uncomfortable over a long page.

A very dark grey on an off-white background is easier to read at length, comfortably exceeds the thresholds, and is what most well-designed text-heavy sites use.

The problem is not that designers wanted something softer than pure black. It is that softer kept going until it reached a grey chosen entirely by how it looked in one room.

The check

1. Measure your body text against its background.
2. Darken anything below the standard ratio.
3. Move thin fonts up a weight at small sizes.
4. Put a solid panel behind text on photographs.
5. Add a second signal anywhere colour carries meaning.
6. Take a phone outside at half brightness.
7. Check the hours, address, and number specifically.

Step six is the one that settles arguments, because it is not a matter of opinion once you are standing in a car park.

Text size on a phone is covered in text somebody can read without zooming.

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.