Contents
Tips

Readable for everyone

Looking good and being readable are not the same thing. Start with contrast and size.

Why bother

Someone is reading your page outdoors in bright sun. Someone else cannot use a mouse.

Fixing this does not only help them. Everything gets easier to read for everyone.

Contrast of 4.5 to 1

Text and background have to differ enough to be read. Pale grey on white is the classic failure.

Every design in the gallery is checked against that number by machine before it goes up.

Images carry a description

When a picture does not load, or someone is having the page read aloud, that description is what stands in for it.

It is written as part of the build. If you spot one missing, say so and it gets filled in.

One main heading per screen

The largest heading tells you what this screen is. There is exactly one of them.

We counted on all seven builds. Every one had exactly one.

Reachable without a mouse

Links and buttons can be stepped through with the tab key alone, and tap targets are 24 by 24 pixels at minimum.

Do not use colour on its own

"Sold out" written only in red is invisible to someone who cannot separate the colours.

Use the colour, and write the word as well.

Asking for a fix

Describe what you cannot read and where. "The price text disappears into the background" is enough to act on.

Read next