SiteCheck

Guides · Accessibility

How to fix text that is hard to read

Your page has text that is too faint against its background. People with low vision can struggle to read it, and so can anyone using a phone in bright light. The fix is usually a darker text color or a lighter background. You can often make that change in your theme colors without redesigning anything.

What the 4.5:1 rule means

Contrast compares how bright the text is with how bright the background is. The ratio runs from 1:1, where both are the same color, to 21:1, which is black on white.

The accessibility standard we test against (WCAG, level AA) asks for at least 4.5:1 on normal text. Large text only needs 3:1. Large means at least 24 pixels, or about 18.7 pixels if the text is bold.

The contrast scale from 1:1 to 21:1A bar runs from 1:1 to 21:1. Everything below the 4.5:1 mark counts as too faint for normal text, and large text has a lower limit at 3:1. 4.5:1 minimum for normal text 1:1 21:1 black on white 3:1 minimum for large text Too faint for normal text #999999 on white is 2.85:1 Good for normal text #767676 on white is 4.54:1
The bar is drawn to scale. Normal text fails in the short section below 4.5:1 and passes in the long section above it.

Gray #767676 on white passes at 4.54:1, and #777777 on white misses at 4.48:1.

How to find the faint text

  1. Open your report and find the item "Some text is too faint to read comfortably". Look at which elements it lists.
  2. Find that text on your page. Light gray captions, footer text and white labels on pale buttons are common places.
  3. In Chrome, right-click the text and choose Inspect. Click the small color square next to color in the Styles panel. The picker shows the contrast ratio.
  4. You can also paste the two colors into a free tool such as the WebAIM contrast checker.

How to fix it

  1. Darken the text color one step at a time until the ratio reaches 4.5:1. If the text sits on a dark background, lighten the text instead.
  2. Change the color in your site-wide settings, so every page gets the fix.
  3. Check any block that still fails. A color set by hand on one block can override the theme.

Where to look depends on your platform, and menus change:

If you work with a developer, send them the list of elements and ask them to bring each one to 4.5:1 in the stylesheet. Ask them to check hover and focus colors too.

What the automatic test cannot see

Text over a photo or a gradient often cannot be measured, so it may not appear as a failure. Check it by eye, or put a solid panel behind the text.

Words inside an image are not tested at all. Colors that appear only on hover are also not tested, because the page is checked as it opens.

If your site uses a page cache, clear it, then rescan once the new colors are live.

Check a page

More accessibility guides