Fovea: the accessibility X-ray for the web

See your site the way disabled users do. Fovea X-rays WCAG violations onto the live page, simulates color blindness and keyboard-only use, then fixes them live as the score climbs 66 → 89.

Comment

Inspiration

95.9% of the top one million home pages have detectable WCAG failures (WebAIM Million 2026), an average of 56 errors per page. 1.3 billion people live with a significant disability (WHO), and in 2024 digital accessibility drove 4,000+ ADA lawsuits (UsableNet).

Teams don't ignore accessibility. They can't see it. A 2.4:1 contrast ratio looks fine on your monitor, and an unlabeled button works fine with a mouse. Static reports list CSS selectors, while a disabled user gets a page that technically "works" and practically doesn't.

Fovea closes the gap between the report and the experience. You watch the page become unusable, then you watch the fix work.

What it does

  • X-ray any page. Paste a URL or open the built-in demo shop. Violations are stamped directly onto the real elements, using 24 WCAG 2.2-aligned rules across contrast, names and labels, structure, keyboard and forms. An Access Score summarizes the damage (66/100 for the demo shop).
  • Step into your users' shoes. One click switches the page through protanopia, deuteranopia and tritanopia (real Machado 2009 color-science matrices) and a low-vision tunnel and blur. Keyboard-only mode dims everything except the numbered tab path, so you can watch a single tabindex="5" hack break the whole order.
  • Hear what a screen reader hears. A reading-order transcript shows what assistive tech would actually announce: "edit text" with no hint of what to type, links named "click here", focus landing on silence inside aria-hidden.
  • Fix it live. Click Fix all on a rule. Fovea edits the sandboxed copy, re-scans, and the score moves on camera (66 → 89 in our demo). Every fix also ships as a copy-paste snippet for your real codebase.
  • Audit the web at scale. The same engine runs headlessly across a corpus of 50 real homepages: 1,662 violations found, 733 critical, on 21 of 50 pages, even among governments, universities and standards bodies.

How I built it

The audited page renders in a sandboxed iframe (scripts stripped, same-origin readable). One DOM walk produces element snapshots with real getComputedStyle() values. Then a pure, dependency-free engine runs the 24 rules as plain functions, computes the weighted score and draws the overlay.

Contrast uses the WCAG relative-luminance formula, with rgba backgrounds alpha-composited up the ancestor chain:

$$ \text{contrast} = \frac{L_1 + 0.05}{L_2 + 0.05} $$

One engine, four runtimes: the browser app, 39 Node unit tests with WCAG golden values, 13 Playwright e2e tests, and the corpus crawler all run the identical code. Zero API keys, zero external AI calls, everything local. The only runtime dependency is Express.

Challenges I ran into

  • Cross-origin iframes are unreadable. "Audit any URL" dies without a same-origin proxy. Building one that rewrites assets, strips every script vector and blocks SSRF was the riskiest piece.
  • Contrast math lies if you let it. Naive tools compute against a transparent background. I composited the full ancestor chain and flag gradients and oklch colors as manual check instead of inventing numbers. Unit tests pin the classic AA boundary: #767676 passes at 4.54:1, #777777 fails at 4.48:1.
  • Scoring calibration. Per-instance deductions zeroed out realistic pages (score 0). I rebuilt the model around per-rule saturation so repetition can't dominate, and now the score moves believably.
  • Demo integrity. My first on-camera pick (gnu.org) was unreachable from my network. Rehearsal caught it, so the recorded demo audits debian.org live. Nothing is mocked.

Accomplishments I'm proud of

  • A real engine audited real sites, not a canned demo, and the same code is tested, crawled and shown on camera.
  • The X-ray metaphor lands in 10 seconds of video, where a feature list wouldn't.
  • Fixes are verifiable: the score moves because the re-scan finds fewer violations.

What I learned

  • Rendering beats parsing. Reading real computed styles through the browser's cascade is the only honest way to check contrast.
  • Accessibility failures are invisible by default, and making them visible is half the fix.
  • A scoring model is a product decision, not just math.

What's next

  • Exportable before/after fix reports (JSON/HTML)
  • More success criteria: focus order, error identification, non-text contrast
  • Crawl-your-own-sitemap mode and CI integration (fail a PR when the Access Score drops)
  • Larger, stratified corpus with scheduled re-crawls

How AI was used

Fovea was built during the hackathon with AI coding agents working from an architecture and quality bar I specified. Every file was reviewed, and every check is deterministic, unit-tested math. No feature is mocked on camera. The idea, scope, naming and product decisions are mine.

Built in one weekend for Next Byte Hacks V5. MIT licensed.

Built With

Share this project:

Updates

Submission history