← Articles

Five decisions that make your website usable by more people

Contrast, tap sizes, text alternatives and facts written as text: five decisions you can settle in plain words before a site is built, with the number or test attached to each.

5 min read

Most of what makes a website hard to use is invisible in a screenshot. Text that disappears when you step outside. A phone number too small to hit on the first tap. Opening hours trapped inside a photograph.

None of that needs code to get right. It needs a handful of decisions, made in plain words, before the site exists. Here are five, each with the number or the test attached, taken from the Web Content Accessibility Guidelines published by the W3C. If what goes on the page is still undecided, that comes first; this is the layer underneath it.

Text has to be readable, not just tasteful

Pale grey paragraphs on white look calm in a mock-up and turn into a squint on a phone in daylight. The floor for body text is a contrast ratio of at least 4.5 to 1 against whatever sits behind it, and 3 to 1 for large text (18 point, or 14 point bold). A free contrast checker measures two colours in a second.

The plain version is dark grey or near-black on white. If colour is the only thing carrying a meaning, such as "the red sizes are out of stock", write it out in words too, because a visitor who cannot separate those two shades has just been told nothing.

Anything tappable has to be big enough to hit

The minimum asked for is a target measuring at least 24 by 24 CSS pixels, or a smaller one with enough clear space that it is not touching what sits next to it. Treat that as the floor. In the design for this product, main buttons and phone numbers sit at 40 pixels and above, because a thumb is not a mouse pointer: a stack of menu links with no gap between them is a stack of wrong taps.

In a brief, this is one sentence: "main buttons and the phone number large enough to hit one-handed, with space between links in lists."

Facts belong in text, not only in a picture

Opening hours designed into a graphic, a price list as a photo, an address painted onto a banner image: a screen reader reads none of it, search engines index none of it, and a customer cannot copy any of it.

The test takes ten seconds. Press and hold to select your opening hours on the page, the way you would select a word in an email. If you cannot, they are a picture, and they need to exist as words as well.

Photographs need one short line each, written for someone who cannot see the picture: "Tray of seeded loaves cooling on a rack", not "image of bread". A divider or a swirl that carries no meaning is left out of that description on purpose, so it is skipped instead of announced.

Assume it will be read at double size

The guidelines ask that text can be enlarged to 200 percent without losing content or functionality. What that means while you are planning the page: real text rather than words baked into images, headings that describe what sits underneath them, and paragraphs that do not stretch the full width of a laptop screen. The guidelines' own advice is lines averaging about 80 characters or fewer.

Test it on any site you are reading now: zoom in with Ctrl and +, or raise the text size on your phone, and watch what breaks. Overlapping blocks, text sliding under a button and words cut off at the edge are the three usual results.

Decide what the form says when it goes wrong

A form with no visible labels, just grey placeholder words inside the box, stops making sense the moment someone starts typing: the label vanishes and every field becomes anonymous. Put the label above the field, every time.

Then write the two messages the form can send. When something is wrong, it names the fix: "add the year, for example 4 November 2026", not "invalid input". When it worked, the visitor gets one plain sentence about what happens next, in your words. That sentence is content, not decoration.

A checklist to keep

  • Body text clearly darker than its background, checked with a contrast tool.
  • Nothing important signalled by colour alone.
  • Buttons and the phone number comfortable to tap, with space between stacked links.
  • Hours, prices, addresses and areas covered typed as text, never only inside an image.
  • One short line describing each meaningful photo, and nothing for decoration.
  • Headings in order, real text throughout, page still readable at 200 percent zoom.
  • Visible field labels, and error messages that say what to fix.

Two of these can be done today, before any design exists: writing your facts out as text, and writing the one-line descriptions for photographs you already own. That is an hour with a notepad, and it does not change depending on who builds the site.

That matters here because this site is not a working tool yet. Sitewright is still being built and is not available: nothing on the home page builds anything today, and the waitlist is the only thing open. The hour above is worth spending either way. To hear when there is something to try, you can join the waitlist.

Related articles

Made with Greta.sh