Readable website text: font size, line spacing and contrast in 5 minutes

Most small-business sites don't fail on readability because of one big bug. They fail on lots of small choices: pale grey body text, tiny print on phones, lines crammed together, words baked into images, and layouts that break when someone makes the text bigger. People with low vision, dyslexia or tired eyes feel it first, but everyone reads faster when text is clear. Here's a 5-minute check and what to change.

The 5-minute readable-text test

1. Zoom to 200%. Press Ctrl and + (Cmd and + on a Mac) until the browser says 200%. All text should still be there, nothing should overlap or get cut off, and buttons should still work. (WCAG 1.4.4)
2. Zoom to 400% or narrow the window. The page should turn into one column you can read by scrolling down, without scrolling sideways line by line. (WCAG 1.4.10)
3. Try wider text spacing. Some readers use browser extensions to add space between lines, letters and words. Paste the CSS below into your browser's developer tools (or use a text-spacing bookmarklet) and check that no text gets cut off or hidden. (WCAG 1.4.12)
4. Check contrast. Normal body text needs a contrast ratio of at least 4.5:1 against its background; large text needs 3:1. Pale grey on white and white on photos are the usual problems. Our colour contrast guide shows how to check. (WCAG 1.4.3)
5. Is it real text? Try to select the words in banners, offers and opening hours. If you can't, they're an image: people can't zoom them cleanly, change the font or have them read aloud reliably. Use real text over the image instead. (WCAG 1.4.5)
6. Is the page's language set? Screen readers pick a voice and pronunciation from the lang attribute, for example <html lang="en">. Most builders set it from your site language setting; check it matches. (WCAG 3.1.1)
7. Read one paragraph on your phone. If you have to squint, pinch or reread, so do your customers. Look for tiny text, very long lines, justified text with big gaps, and long blocks in capitals or italics.

CSS for the text-spacing test

These are the spacing values WCAG 1.4.12 uses. Your page should still work when they're applied:

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

If text disappears or overlaps, the usual cause is a box with a fixed height. Let it grow with its content (use min-height instead of height, and avoid overflow: hidden on text boxes).

CSS you can copy: a comfortable default

These aren't legal thresholds, just sensible defaults many designers use, loosely following the W3C visual presentation advice:

body {
  font-size: 1.125rem;   /* about 18px; use rem so it grows with browser settings */
  line-height: 1.6;
  color: #1f2328;        /* dark grey on white passes 4.5:1 comfortably */
}
p, li { max-width: 70ch; } /* keep lines from getting too long */
p { margin: 0 0 1em; text-align: left; }

Use relative units like rem and em for font sizes rather than fixed px everywhere, so text follows the reader's own browser and phone settings.

Common mistakes

• Light grey body text because it "looks clean".
• Text on top of photos or video with no solid or darkened background behind it.
• Offers, prices or opening hours saved as images. See our tables guide and menus and PDFs guide.
• Body text below about 16px on phones, or font sizes fixed so they ignore the reader's settings.
• Fixed-height boxes and cards that cut text off when it gets bigger.
• Blocking pinch zoom on phones. See our mobile guide.
• Long paragraphs of jargon. Short sentences, headings and lists help everyone, including people reading in a second language.

On Wix, Squarespace, Shopify or WordPress

Most builders let you set body text size, line height and colours once in the site or theme styles, so fix it there rather than page by page. Check the mobile view separately, since some builders let mobile text sizes differ from desktop. Replace text-in-image banners with the builder's own text-over-image block. Our Wix, Squarespace, Shopify and WordPress guides cover each platform.

What an automated scan can and can't tell you

An automated scan, including ours, can flag low-contrast text, a missing page language and zoom being blocked. It can't reliably tell whether text is baked into an image, whether the layout survives 200% zoom or wider spacing, or whether your writing is easy to follow. The 5-minute test above covers those. This page is general information, not legal advice.

Related: colour contrast guide, mobile and zoom checks, heading structure, accessible tables, website accessibility checklist, accessible location pages and maps.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Accessible location page: Google Maps embeds, directions and hours
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.