Readable Text and Color Contrast on Your Shop Website

Light gray text on white, white text over a busy photo of a garage, or tiny print on a phone: all are hard to read for many people, not only those with low vision. Readable text helps every customer find your phone number, prices and hours.

Color contrast

Contrast is the difference in brightness between text and its background. W3C guidance uses a contrast ratio, and suggests at least 4.5:1 for normal-size text (and 3:1 for large text).
Free "contrast checker" tools let you enter two colors and see the ratio. Your web person can also use the browser's built-in developer tools.
Common fixes: darken gray body text, avoid thin light fonts, and don't rely on brand colors like yellow or light blue for text on white.

Text over photos

Hero images with text on top look great on a big screen but can become unreadable on a phone. Add a solid or semi-transparent dark band behind the text, or put the text below the photo.

Size and zoom

Body text should be comfortable to read on a phone without zooming.
People should be able to zoom in. W3C guidance says text should be resizable up to 200% without losing content. Don't disable pinch-zoom.
Use real text, not text inside images, for anything important.

Don't rely on color alone

If you mark required form fields in red, also add the word "required". If links are only a different color, underline them too.

Quick self-check

Look at your site on a phone outside in daylight.
Zoom your browser to 200% on a computer.
Ask someone who wears reading glasses to find your hours and phone number.

Check your own site in seconds

Our free website check for auto repair shops looks at one page for broken links, Google basics, phone setup, HTTPS, image descriptions and business details for Google, and explains what it finds in plain English.

Run the free check

Official sources

Related guides

General information for shop owners, not legal advice. Last reviewed October 2026.