Can customers read your website text? Contrast and zoom checks

Can a customer read your service description comfortably, then enlarge it without losing the booking button? Text that looks neat on your own screen can still be difficult to use.

Start with one important page: your main service, booking or enquiry page. This check focuses on the colours behind the words and what happens when the words get bigger. You do not need to redesign the whole site to record a useful set of problems.

Pick the text that helps someone act

Write down the page address, then find the service description, prices or quotation information, form labels and main action button. Include small supporting text, such as instructions beneath a field. Read the page as a customer who has not seen it before.

Note anything you have to lean towards the screen to read. This is a practical starting point, not a measurement. Ask another person to try the same page, but do not assume that two people finding it readable means everyone will.

Measure colour contrast

Contrast describes the difference between text and its background. W3C’s WCAG guidance on minimum contrast sets a ratio of at least 4.5:1 for ordinary text and 3:1 for large text at Level AA. Large text means at least 18 point, or 14 point bold. There are specific exceptions, including logos and inactive controls; ordinary branded page copy is not exempt.

Ask your website editor to check the actual foreground and background colours with a contrast checker. Record the colours and result beside each problem. A pale green or grey may look attractive in a palette but still be unsuitable for small lettering against white. Treat a result below the threshold as a failure; do not round it up.

Check button labels and text over photographs too. Where the background changes behind the words, ask the editor to test the relevant areas. Moving the words onto a solid panel may be a simpler repair than trying to choose one colour that works over every part of a photograph.

Try the page at 200% zoom

Use the zoom control in your desktop browser’s menu. Increase it in steps from 100% to 200%, checking the page as you go. Can you still read the full description, see form instructions and reach the main action? Look for words cut off by a box, labels hidden under other content or a button that has become unusable.

W3C’s guidance on resizing text says text must be capable of enlargement to 200% without losing content or functionality, with exceptions for captions and images of text. Browser zoom is one useful way to investigate this. Record the browser and zoom level when you find a problem so your developer can reproduce it.

Repeat the check on a second important page with a different layout. A tidy service page does not prove that the booking form works in the same way. Return zoom to your preferred setting when you finish.

Keep the repair small and specific

A useful report might say: “On the quotation page, the instruction below the email field is faint, and at 175% zoom the submit label is cut off.” Add the page address and a screenshot without customer details.

Ask the person making the change to address the text colour or the space available to the label. Then repeat the original check on the public page. Also look at nearby elements: a colour or spacing change in a shared style may affect several pages.

Add the check to your next content review

Keep a short list of the pages checked, the problems found, who will fix them and the date of the retest. These checks cover part of accessibility; they do not establish that a whole website meets WCAG.

For a separate check on how customers move through a page, follow our guide to using your website without a mouse. It complements a visual review by testing another way to reach links and controls.

Would you like to discuss text that is hard to read or a layout that breaks when enlarged? Contact Hobbit Web Design with the page address and a short description of what happens.