Soft grey body text such as #767676 passes the contrast minimum but isn't enough for readers with low vision: 4.54:1 against white, where they need 7:1.
color: #767676 People with low vision who read without a magnifier strain to read an article whose paragraphs are set in a soft grey.
A ceramics studio's journal opens an article, "How we glaze a mug", with a near-black headline, a byline and two long paragraphs. The designer wanted a calm, editorial page, so the paragraphs and the byline are set in a soft grey, #767676, and the headline stands out above them. That grey was picked with care: it is the lightest neutral grey that still passes the 4.5:1 minimum on white, and the site passes its AA audit.
A reader with low vision, who reads without a magnifier, finds the headline easy and the paragraphs a strain. The letters are all there, but each line takes effort; a few lines in, they lean towards the screen, or stop reading.
A contrast ratio compares how light the text is with how light the background behind it is. It runs from 1:1, text the same colour as the page, to 21:1, black on white: the higher the number, the more the letters stand out.
WCAG 1.4.6 asks for at least 7:1 between text and its background, and 4.5:1 for large text: 24px and up, or 18.66px and up when bold. The paragraphs are 17px regular and the byline is 13px, so both are normal text and need 7:1. #767676 on white is 4.54:1. It passes 1.4.3, the AA minimum, and fails 1.4.6. The headline is #1a1a1a, at 17.40:1, and passes either way.
The gap between the two levels is a gap between readers. The W3C's explanation of 1.4.6 says 7:1 makes up for the loss of contrast sensitivity that usually comes with vision loss of about 20/80. People with more loss than that usually use assistive technology, such as magnification and contrast settings. The 7:1 level is for the people in between, who read the page as it is drawn.
Nothing in the browser stands in the way: it draws whatever colour the stylesheet names. The grey is usually a design token called "muted" or "secondary", checked once against 4.5:1, and then used for every paragraph, caption and byline the design wants quiet.
It matters most on what people read at length: an article, a recipe's method, a product's care instructions, terms and conditions. A short label in the same grey is read once; a page of it is read line after line. The same reader also meets it outdoors on a phone, on a laptop with its brightness turned down, and through glasses that are a little out of date.
1 of 10 groups affected
axe has a rule for 7:1, color-contrast-enhanced, but it is tagged Level AAA and off by default, so a scan that runs axe's defaults, or only the A and AA rules, passes #767676 without a word. A design system that checks its palette against 4.5:1 only marks the grey "accessible". An AI tool asked for "an accessible grey" can suggest #767676 or a grey from a library, such as Bootstrap's secondary #6c757d (4.69:1) or Tailwind's gray-500, #6b7280 (4.83:1), all short of 7:1. The EaseWeb audit runs color-contrast-enhanced and reports the text that passes 4.5:1 but not 7:1 as Level AAA leads for review.
Read the article, then turn up the blur and watch which words go first.
The blur is a rough stand-in for low vision, which often softens edges and lowers contrast. On each side, compare the paragraphs with the headline at the same blur. With the switch, press Higher contrast at the top of the page.
Broken Can you fix this?
Every mug is dipped twice: once in a pale base glaze, then at the rim in a darker one that runs as it fires.
We wipe the foot clean before each firing, so the glaze can’t fuse the mug to the kiln shelf. The second coat stops a finger’s width below the rim, and the heat carries it the rest of the way.
Give body text 7:1 against its background.
<header class="site-header"> <a href="/" class="logo">Kiln & Clay</a></header><main> <article class="article"> <h1>How we glaze a mug</h1> <p class="byline">Studio journal · 6 min read</p> <p>Every mug is dipped twice: once in a pale base glaze, then at the rim in a darker one that runs as it fires.</p> … </article></main>The headline is right: near-black on white, at 17.40:1. The paragraphs and the byline are where it fails.
A darker grey that reaches 7:1
<header class="site-header"> <a href="/" class="logo">Kiln & Clay</a></header><main> <article class="article"> <h1>How we glaze a mug</h1> <p class="byline">Studio journal · 6 min read</p> <p>Every mug is dipped twice: once in a pale base glaze, then at the rim in a darker one that runs as it fires.</p> … </article></main>This fixes the Before and passes 1.4.6 for every reader, with nothing to switch on.
Both pass. Use the darker grey: it reaches every reader with nothing to find or turn on, it is a one-line change to a token, and the page keeps its quiet look through size, weight and spacing. Add the switch only when the lighter grey is a decision the brand won't change, and then treat the switch as part of every page's header, kept in its place and tested on each release.
Large text needs only 4.5:1 under 1.4.6, so a heading of 24px or more, or 18.66px and bold, can stay in #767676. Everything smaller needs 7:1, and that includes the text designers most often make quiet: bylines, captions, helper text under a field, the small print in a footer.
Give the token a name that says what it may be used for, and write its ratio beside it. A token called --muted gets used for anything quiet; one called --text-secondary with a 7.46:1 comment tells the next person it is safe for paragraphs.
prefers-contrast: more is worth honouring, as the switch does when nothing is saved, but on its own it is not a fix for 1.4.6. It only changes the page for people who have turned on a contrast setting on their device, and the page everyone else gets still has to meet the criterion.
The switch reads its choice in a script, so a page can show the grey for a moment before it turns dark. Set data-contrast from localStorage in a small script in the head, before the body is drawn, or on the server from a cookie.
Every state and every theme counts, as with the AA minimum: hover, focus and visited colours, a dark theme's own greys, and text with opacity on it, whose colour is lighter than its token. In a Windows contrast theme the browser replaces these colours with the user's own, so the grey doesn't reach them there, but it still has to pass in the page's own colours.
Quiet text can still reach 7:1.
Five more ways to set the studio’s article. Point at each one and Tab to it: three reach 7:1 in the paragraph and the byline, and two stop short though they pass 4.5:1.
Every mug is dipped twice: once in a pale base glaze, then at the rim in a darker one that runs as it fires.
Every mug is dipped twice: once in a pale base glaze, then at the rim in a darker one that runs as it fires.
Every mug is dipped twice: once in a pale base glaze, then at the rim in a darker one that runs as it fires.
Every mug is dipped twice: once in a pale base glaze, then at the rim in a darker one that runs as it fires.
Every mug is dipped twice: once in a pale base glaze, then at the rim in a darker one that runs as it fires.
4 checks, no mouse.
Test with: Contrast measurement, Keyboard, Screen reader
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the colour tokens or the theme change.
How screen readers handle aria-pressed
This is a starting pattern, not a guarantee for every application. Colour values and token names are examples; measure your own palette on your real backgrounds. Text over photos, and text below the 4.5:1 minimum, are covered in low-contrast text on brand colours, photos and hover states. A contrast ratio is a minimum, not proof that text is comfortable to read: thin weights, small sizes and long lines make reading harder at the same ratio, and some readers find full black on white too harsh. Check the complete pages with people who rely on them.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
EaseWeb service
I turn guides like this one into rules your coding agents follow and checks your CI runs. Then I retest by hand with a keyboard and screen readers, periodically.