Real sites, real diffs, re-scanned

The problem

CogniDeck is a dark, Linear-style daily puzzle site. Its tertiary text colour (#62666d) sat at 3.1 to 3.45:1 against the near-black surfaces, below the 4.5:1 WCAG 2.2 AA asks for small text, and it is used for every date, label and puzzle number. People with low vision, older players and anyone on a phone in daylight struggle to read it. Links inside sentences were also told apart by colour alone, which colour-blind visitors cannot see.

What we changed

• Tertiary text token #62666d to #80858d: clears 4.5:1 on all three surfaces it is used on, still a clear step below secondary text
• Button hover now darkens (#5f46ef) instead of lightening: white label 5.5:1, the old hover was 3.8:1
• New accent-text tint for small purple words on near-black (6.5:1); the brand accent itself is unchanged for buttons and icons
• Links inside running sentences are underlined, so they no longer rely on colour alone (WCAG 1.4.1)
• Reviewed and rejected all 3 automated label edits: two would have added a duplicate aria-label and broken the build, one was inside a code comment

The problem

Screen reader users could not jump to the content on 13 pages because none of them had a main landmark, so 74 blocks of content sat outside any region. On the order form, keyboard users could not see which field they were in: the focus style was a faint border shift. Help text in the order, domain and publish flows was white at 25 to 45 percent opacity on black, and fields inside repeatable lists had labels that were not tied to their inputs. Three showcased designs used kicker colours at 2.8 to 3.3:1.

What we changed

• Main landmark on all 13 marketing pages; the order form is a labelled region (the live preview beside it brings its own main)
• Header, main and footer on preview pages carry names, so they stay distinguishable from the landmarks inside the live demo frame
• A clear 2px focus ring on every dark form field (order, domain, lead and recovery forms). Found on the way: Tailwind 4's outline-none silently cancels a plain outline-2, so the ring needs outline-solid too
• List-item labels in the order form now point at their inputs; the two placeholder-only lead form fields are labelled
• Faint app text raised from 25 to 45 percent white to 60 percent (about 7:1); placeholders to 50 percent
• Kicker colours fixed in the Noble, Ductus and Broadseam designs, checked against each page background
• The live demo frame shows an accent ring while keyboard focus is inside it
• Reviewed and rejected 19 of 24 automated edits: 9 'alt texts' were written into code comments, others hit build output or relabelled fields that already had visible labels

The problem

SearchAll's muted grey (#7b8187) carried every label, date, breadcrumb and price note, at 3.6 to 3.9:1 where WCAG 2.2 AA asks for 4.5:1. Tool fact labels were dimmed further with opacity (2.15:1), the header's main call to action showed dark text on blue (2.6:1) because a nav rule out-ranked the button's own colour, and links inside guides had no underline and the same colour as the text around them. Low-vision and colour-blind readers, and anyone reading on a phone outdoors, were the ones paying for it.

What we changed

• Muted text token #7b8187 to #5f656b: clears 4.5:1 on all four light surfaces, still visibly secondary
• Every 'opacity: 0.6 to 0.75' used to mute text replaced with the muted token, across tools, compare and alternatives pages, including pages the scan never reached
• Header call to action keeps white on indigo (2.6:1 to 6.3:1) by fixing the CSS specificity clash, not by changing the brand blue
• Green token #009966 to #007a52 for the free-tier chip (3.3:1 to 4.85:1)
• Guide links underlined and in the brand blue, so they are not colour-only (WCAG 1.4.1)
• Skip-to-content link, a main landmark target, a labelled primary nav, and footer headings that no longer skip levels
• Rejected the scanner-driven auto-fix that would have changed the body text colour to near-white to fix one button label