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 comes from research on how much difference a person with moderately reduced vision needs to read comfortably. It is the number every automated checker, procurement reviewer, and complaint letter uses.
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 notice the change side by side. A person reading on a phone outdoors will be able to read those captions 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 is in the site editor under Styles. On older themes, it is in the customizer or in a stylesheet a developer maintains.
That is also why this is not a redesign. Nothing moves and no fonts change. The site looks the same to everyone except the people who couldn't 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
Designers use light gray to make secondary text recede. Size and weight do the same job without making anything hard to read. A 14-pixel caption in a passing gray still recedes next to 17-pixel body text.
Turning everything black to fix contrast flattens the page. Adjusting one value and letting size carry the hierarchy keeps the design.
Placeholder text inside form fields fails too. Browsers render it light by default, and it fails almost everywhere. If each field has a visible label above it (the forms series covers this), you don't need the placeholder at all.
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.
Leland Fiegel