Blog · What the free audit finds
One Color Value: Fixing Contrast Without a Redesign
Light gray text on white is the most common accessibility finding there is. It looks refined on a designer's screen and vanishes in sunlight, on a cheap monitor, or for anyone over fifty.
The ratio the standard asks for, a short table of grays that pass and fail, and why the fix is one value in the theme's palette rather than a redesign.
The number the standard asks for
Contrast is measured as a ratio between the brightness of text and the brightness of what sits behind it. Black on white is 21 to 1. The accessibility standard asks for at least 4.5 to 1 for ordinary text and 3 to 1 for large text, meaning about 24 pixels and up, or 19 pixels and bold.
The ratio is not a matter of taste. It comes from research on how much difference a person with moderately reduced vision needs to read comfortably, and it is the threshold every automated checker, every procurement reviewer, and every complaint letter refers to.
The grays that pass and the grays that fail
On a white background the line falls in a narrow band. A few values, with their ratios:
Show the code Hide the code Text, 6 lines
#999999 2.85 to 1 fails
#949494 2.99 to 1 fails
#8a8a8a 3.45 to 1 passes only as large text
#767676 4.54 to 1 passes
#666666 5.74 to 1 passes
#595959 7.00 to 1 passes the stricter AAA levelNotice how close the failing values are to the passing ones. A theme that chose #999 for captions was one shade away from compliance. Nobody will see the difference in a side-by-side, and a person reading on a phone outdoors will see the text for the first time.
Why it is one value
Themes and page builders define a palette, and the light gray appears in it once. Every caption, form hint, footer line, date, and secondary label points at that one entry. Change it and the whole site changes. On a block theme the palette lives in the site editor under styles; on older themes it is in the customizer or in a stylesheet a developer maintains.
This is also why the fix is not a redesign. Nothing moves. No font changes. The site looks the same to everyone except the people who could not read part of it before.
Brand colors are the other case
An organization's blue or green was usually chosen for a logo, not for text. Light and bright brand colors often pass as a background behind white text and fail as text on white. Our own blue, #1849B8, is 7.8 to 1 on white in both directions, which is a matter of luck as much as choice. Check yours in both directions before using it for links.
When a brand color fails as text, keep it for backgrounds, buttons, and large headings, and pick a darker relative of it for links and body-sized text. Two shades of the same hue read as one brand.
Keep the hierarchy, lose the lightness
The reason designers reach for light gray is to make secondary text recede. Size and weight do the same job without the cost. A caption at 14 pixels in a passing gray recedes plenty next to 17 pixel body text. Fixing contrast by turning everything black flattens the page; fixing it by adjusting one value and trusting size keeps the design.
Placeholder text inside form fields deserves its own mention. Browsers render it light by default, and it fails almost everywhere. A visible label above the field, which the forms series covers, makes the placeholder optional in the first place.
What the free audit checks
The free audit runs the automated contrast rule across the homepage and reports each failing element with its measured ratio and the colors involved. A homepage with thirty failures usually has one cause. Find the shared value, change it, and run the check again.