Accessibility
Text is readable against its background
a11y.color-contrast
Why this matters
Text has to stand out enough from what is behind it to be readable. Pale grey on white looks refined on a designer's monitor and disappears for anyone with reduced vision, or simply reading on a phone in daylight. It is one of the most common reasons people give up on a page, and one of the easiest to fix.
Who fixes it
You can, usually
Roughly how long
Minutes
Care needed
Low risk to change
How to fix it
Darken the text or lighten the background until the ratio is at least 4.5:1 for body text and 3:1 for large headings. Check the greys — pale grey on white is the usual culprit.
On your platform
WordPress
A theme setting rather than a content one, so fix it once rather than page by page. Block themes have it under Appearance → Editor → Styles; classic themes under Appearance → Customize → Colours. If a page builder set the colour on the element itself it overrides the theme, which is why one section can fail while the rest of the site passes.
Shopify
Online Store → Themes → Customize → Colours, which most themes expose as a set of schemes. Change the scheme rather than the section, or you will be fixing the same pale grey on every page in turn.
Drupal
The theme's CSS. If the theme has a colour module or a settings form, use that; otherwise this is a stylesheet change and belongs with whoever maintains the theme.
Joomla
Most Joomla templates ship a template style with colour options — System → Site Templates → Styles. Where the template offers none, it is a CSS change in the template's user stylesheet, which survives template updates in a way editing the main stylesheet does not.
How we score it
Failing this check takes up to 12 points off your accessibility score. It is a fact about your site rather than a measurement, so it reads the same on every scan until you change something.
Does your site pass this one?
This check runs on every scan, along with the other 106. Free, no account, and you see the evidence for each result.
Check my siteOther accessibility checks
- Accessibility check completedThe accessibility pass runs inside a real browser, and a few things can stop it: a content security policy that blocks our script, or a page that never finishes loading. When that happens the accessibility section is marked unchecked rather than passed, because finding no problems and being unable to look are not the same result.
- Buttons have readable labelsA button with no readable label is announced to a screen reader as nothing more than 'button'. This usually happens when the button contains only an icon. If the unlabelled one is a menu toggle or an Add to Basket, the site becomes unusable rather than merely awkward.
- Form fields are labelledA form field without a label gives a screen reader user no indication of what to type into it. Placeholder text is not a substitute — it vanishes the moment somebody starts typing. On a contact or checkout form this is the difference between an enquiry and a visitor who leaves.
- Headings run in orderScreen reader users navigate by jumping between headings. When levels are skipped, that outline stops matching the page and becomes confusing to move through.
- Images have descriptions for screen readersSomeone using a screen reader hears nothing where these images are. If any of them are product photos, logos or buttons, that part of the page simply does not exist for them.
- Links have readable textA screen reader announces these as just "link", with nothing to say where they go. Icon-only links, such as social media buttons, are the usual cause.