Our Blog

Blog Index 

Readable Website, Bigger Sales: Six Fixes for Small Shops

Posted on 1st Nov 2026 11:16:08 in Digital Growth Tips

Tagged as: website accessibility, small business website, readability, WCAG, shop website India, digital growth

Picture the customer who matters most to a neighbourhood shop in India: a man in his fifties, standing outside a bank, squinting at his phone in the afternoon sun. He heard about your store from a relative and searched for it. Your homepage opens, but the body text is small and pale grey, the "Call us" button is a thin strip of blue, and your price list is a photograph taken at an angle. He cannot read any of it without pinching and zooming, so he taps back and opens the shop that appeared second in the list.

That is not a matter of design taste. It is a measurable accessibility problem, and the numbers are published. The Web Content Accessibility Guidelines, or WCAG, set the thresholds that most organisations are judged against, and nearly every fix below costs nothing except an afternoon and a firm conversation with whoever built your site.

There is a commercial reason to care too. The same changes that help a customer with weak eyesight also help a customer on a low-priced Android phone costing under Rs 10,000, in bright sunlight, on a slow connection, while holding a child in one arm. Google's own accessibility audits reward most of these fixes, so readability and search visibility pull in the same direction. Six fixes follow, roughly in order of how much difference they make.

1. Set body text at 16 pixels minimum, and never lock the zoom

Sixteen pixels is the floor for body copy, not the target. For a shop site read by people of all ages, 17 or 18 pixels for paragraphs is comfortable and looks deliberate. Small print at 12 or 13 pixels is where most customer complaints start, because it looks tidy on a designer's 27-inch desktop screen and becomes unreadable on a phone held at arm's length.

The measurement that matters is not the size you set, but the size the customer can produce. WCAG success criterion 1.4.4 requires that text can be enlarged to 200 percent without losing content or function. That means two things for your site:

  • Body text and headings should be defined in relative units like rem, em and percentages, not fixed pixels. Google's accessibility course is blunt about this: a heading declared in pixels will not respond to the reader's font settings, while one declared in rem will.
  • Nothing should switch off pinch-zoom. If your developer has put user-scalable=no or a maximum-scale below 5 in the page settings, ask for it to be removed. Chrome's Lighthouse audit checks for exactly this, and it fails the page when it is present.

Ask your developer, or look in your theme settings, for body text at 18 pixels with a line height of about 1.5. Then open the site on your own phone, go into Settings, set the display font to Large, and reload. If the layout breaks or the text stays the same size, the site is ignoring the reader. That is fix number one, and it applies even to the most expensive template.

2. Fix the contrast: dark ink on a light background

WCAG success criterion 1.4.3 sets a minimum contrast ratio of 4.5 to 1 between normal text and its background, and 3 to 1 for large text of about 18 point and above. In practice, that rules out the two most common mistakes on Indian small-business sites: pale grey paragraph text on white, and white text sitting directly on a busy photograph of the shop.

A lighter grey may look modern on a bright monitor, but it disappears on a phone screen at half brightness. If you want grey, keep it dark, closer to charcoal than to silver. White text on a photograph needs a solid dark layer behind it, not a thin gradient, because the photograph changes underneath from one screen to the next.

You do not need a designer to check this. Paste your two colour codes into the free WebAIM Contrast Checker and it returns the ratio and a pass or fail. Lighthouse, built into the Chrome browser, runs the same check across every visible element on the page. Renovating a colour scheme is one of the cheapest credibility upgrades a small site can make.

3. Make buttons and links big enough for a thumb

WCAG 2.2 added a target size requirement: the area you tap for a pointer input must be at least 24 by 24 CSS pixels, with some allowance for spacing. That is the legal minimum. For real thumbs, especially on older hands, aim for 44 to 48 pixels tall and leave clear space between neighbouring buttons.

The most useful thing you can do is reduce the number of competing actions. A shop site needs a call button, a directions button, and a WhatsApp or enquiry button. If those three sit on top of one another in a row of six icons, every one of them becomes harder to hit. Give each one its own row and make the phone number a tap-to-call link rather than plain text.

Link wording matters as much as link size. WCAG 2.4.4 asks that a link's purpose can be understood from the link text itself. "Click here" fails that test; "See this week's price list" passes, and it also tells Google what the page is about.

4. Replace pictures of text with real text

Some of the worst-performing pages on small-business sites are the ones where the price list, the menu, or the Diwali offer was exported as an image and pasted in. Images of text cannot be enlarged cleanly, cannot be read aloud by a screen reader, cannot be translated by the browser, and cannot be indexed by Google. When a customer zooms in, they get a blurry photograph instead of larger words.

Retype the content as a real list on the page. If you must keep an image, give it a short written description in the alt field, and keep the important words in ordinary HTML as well. Chrome's accessibility scoring gives a missing alt attribute one of its highest weights, because it is one of the simplest failures to fix.

While you are there, stop using colour alone to carry meaning. A green dot for "in stock" and a red dot for "sold out" is invisible to a colour-blind customer and confusing to everyone in low light. Add the word.

5. Label every form field and explain every error

An enquiry form is the most valuable square metre of your website, and it is usually the least tested. W3C's design guidance asks for a descriptive label next to every field, positioned close to it, and for error messages that say what went wrong and how to correct it.

A placeholder inside the box is not a label. The moment the customer starts typing, the instruction disappears, and anyone using a screen reader may never hear it at all. Put a visible label above each field: Name, Phone number with the ten-digit format spelled out, and What do you need. Keep the form to three or four fields, and after submission show a plain confirmation on the page rather than a blank white screen.

Then test it yourself, on a phone, with one deliberate mistake. If the form silently rejects a number without a country code, that customer is gone and you will never know their name.

6. Test the site in twenty minutes, the way a customer meets it

You do not need an audit firm to find most of these problems. W3C publishes a short preliminary review called Easy Checks that covers the essentials: the page title, image alternatives, heading structure, contrast, text resizing, keyboard access, form labels, and moving or auto-playing content. Run it once against your homepage and once against your most-viewed product page.

  • Run Lighthouse in Chrome on both pages. Look at the accessibility score, but more importantly at the list of failed audits and their weightings, so you fix the ones that matter first.
  • Run the free WAVE checker at wave.webaim.org. It flags missing labels, empty links, and contrast errors directly on a screenshot of your page, which makes the problems easy to see.
  • Zoom the browser to 200 percent and check that nothing overlaps or disappears. Narrow the window to about 320 pixels wide, which is the width WCAG uses for its reflow test, and check that the page becomes one readable column.
  • Put the mouse aside and press Tab through the page. You should always be able to see which element has focus.
  • Turn on TalkBack or VoiceOver for two minutes and listen to your homepage. If the buttons are announced as "button, button, button", you have found the same problem a blind customer would.

Write the findings as a numbered list with a deadline and hand it to your developer or agency. Every item above is a setting or a template change, not a redesign, and most can be closed within a week.

What these six fixes are worth

Accessibility is usually presented as a legal obligation, and for public services it is one: the UK government's service manual sets WCAG 2.2 level AA as the minimum for its digital services. For a shop, the honest case is simpler. The customers you are losing are not a niche group. They are the people with the most spending power in a household, reading on the cheapest screen in the house, in the worst light of the day.

Fix the text size, the contrast, the button size, the pictures of text, the form labels, and the twenty-minute test. Do it this month, before the next festival season brings a wave of first-time visitors who will decide in eight seconds whether your shop looks like a real business. The shop that is easy to read is the shop that gets the call.

Sources

Recent Posts

Catgories

Archives

`
whatsapp me