WCAG 2.1 AA
We ran an accessibility audit on our own site and fixed every failure in the design system — no overlay widget. Seven failing checks to zero, measured with axe-core.
Most US accessibility lawsuits target ecommerce, and the overlay-widget shortcut has been publicly discredited — so we proved the honest workflow on our own site first. An axe-core baseline (WCAG 2.1 A + AA) across nine key pages of mntfuture.com found 7 failing nodes, all traced to four root causes. We fixed them at the design-token level in July 2026 and re-scanned: zero violations, brand intact, no overlay.
The overlay era is over.
Accessibility is now a commerce-specific legal risk: the large majority of US ADA website lawsuits target ecommerce, and the FTC's action against overlay vendors ended the 'install a widget' era — courts and plaintiffs treat overlays as evidence of neglect, not compliance. The honest fix lives in the design system itself. Before selling that workflow to clients, we held ourselves to it: audit our own site, fix the real tokens, publish the real numbers.
A senior-led path from idea to live.
Baseline, honestly
axe-core against nine key pages — home, both vertical hubs, service pages, work, contact, blog — scoped to WCAG 2.1 A and AA rules. Result: 7 failing nodes across 5 pages.
Trace to root causes
Every failure mapped to four causes — two contrast failures in shared components, one in a global button token, and a third-party iframe with a machine-generated title.
Fix the system, not the page
Contrast fixed by moving tokens within the existing brand palette (brand → brand-700); the third-party embed wrapped with a guard that enforces an accessible name.
Re-scan and keep scanning
Same scanner, same rules: zero violations on all nine pages. The scan is repeatable on any deploy — the same workflow we run for client stores.
What did zero violations actually take?
In July 2026, an axe-core scan (WCAG 2.1 A + AA) of mntfuture.com found 7 failing nodes across 5 of 9 key pages. Every failure traced to four root causes. We fixed them in the design system — two tokens, one text color, one iframe guard — and re-scanned: zero violations on all nine pages, with the brand palette intact.
The audit and the fixes.
The audit
- axe-core engine — the industry-standard WCAG rule set, run in a real browser
- Nine key pages scanned: home, /commerce, /ai-agents, services, work, contact, blog
- Contrast math checked against WCAG AA thresholds (≥ 4.5:1 for body-size text)
- Third-party embeds audited too — iframes need accessible names (WCAG 4.1.2)
The fixes
- Global .btn-primary token: white on #2095F1 was 3.16:1 → brand-700 #0E66C2, 5.7:1 — one token, every CTA passes
- Footer Subscribe button — rendered on every page — same root cause, same fix
- Form microcopy: slate-400 on white was 2.56:1 → slate-500, 4.76:1
- Clutch reviews iframe: script kept overwriting the title with a handshake string → a MutationObserver enforces a descriptive name
What we shipped, on screen.
Before / after, per page
The axe-core scan across nine key pages — 7 failing nodes before, zero after.
Four root-cause fixes
Contrast math and an accessible name for a third-party iframe — fixed in the design system, not painted over.
The honest scoreboard
Real, dated numbers from our own site — the same audit we run for client stores.
Where the hard problems were.
Why token-level remediation beats page-by-page patching — and what we deliberately don't claim.
Token-level remediation
One design-token change fixed every primary CTA on the site at once — and the fix can't drift, because new pages inherit it.
No overlay widget
Post-FTC, overlays are a liability. Every fix here is in the actual HTML, CSS and components — the only kind that stands up to an audit.
Third-party embeds handled
You can't edit a vendor's iframe, but you can guard it: a MutationObserver keeps a descriptive accessible name on the Clutch widget.
Brand preserved
The fix moved within MnT's own palette — brand-700 is still unmistakably MnT blue. Compliance didn't cost the design.
Repeatable on every deploy
The scan is scripted and re-runnable — accessibility as a regression gate, not a one-time certificate.
Honest scope
Automated rules catch the measurable layer. Keyboard-flow and screen-reader review is the manual layer we run on client engagements.
Why we fixed it this way.
Every technology earned its place by solving a specific problem better than the alternatives.
axe-core (WCAG 2.1 A/AA)
Used for: The audit engine, run in a real browser against each page.
Advantage: The same rule set plaintiffs' auditors use — deterministic, repeatable, and mapped rule-by-rule to WCAG success criteria.
Design-token remediation
Used for: Contrast fixes made in the shared Tailwind tokens, not per-page overrides.
Advantage: One change fixes every instance sitewide — including pages that don't exist yet.
In-palette color steps
Used for: brand → brand-700 and slate-400 → slate-500 from the existing scale.
Advantage: Passes AA without inventing new colors — the brand system stays coherent.
MutationObserver guard
Used for: Enforces a descriptive title on the third-party Clutch iframe.
Advantage: Vendor scripts can overwrite attributes at any time; the guard makes the accessible name stick without forking their code.
What it's built on.
- axe-core 4
- WCAG 2.1 A + AA
- Tailwind design tokens
- React components
- MutationObserver
- Repeatable scan script
- Next.js App Router
- TypeScript
The questions buyers ask about this build.
Because overlays don't fix the underlying code — and after the FTC's $1M action against overlay marketing claims, they're treated as a liability, not a defense. Most ADA web lawsuits still target ecommerce sites, overlays installed or not. The only remediation that stands up to an audit is in the actual HTML, CSS and components.
Because the failures lived in shared code, not individual pages: a global button token, a footer component rendered on every page, one form style, and one third-party embed. Fixing the design system fixes every page that uses it — including future ones. That's why we remediate tokens, not screenshots.
No — the fix moved within MnT's existing palette. The primary button went from brand (#2095F1) to brand-700 (#0E66C2): same blue family, 5.7:1 contrast instead of 3.16:1. Accessible and on-brand are not in tension if the design system has proper color scales.
No, and we say so plainly: automated rules like axe-core catch the objectively measurable layer — contrast, names, structure. Full WCAG conformance also needs manual keyboard-flow, focus-order and screen-reader review. That manual layer is part of our client engagements; this case study shows the automated layer done honestly.
Yes — this is the exact workflow inside our Managed Commerce & Compliance service: baseline scan, root-cause remediation in your design system, a re-scan you can verify, and the manual review on top. Book a free architecture workshop and we'll scope your store's ADA exposure.
Is your store carrying ADA risk?
Most US accessibility lawsuits target ecommerce. We'll run this exact audit on your store — baseline scan, root-cause fixes in your design system, verifiable re-scan. Book a free architecture workshop to scope it.