A11yCanvas

• 

  icon

• 

  Main Gui to control everything

• 

  Main Audit Log ( brings out issues that are against vision-struggling people )

Inspiration

I scroll past the web every day, but 2.2 billion people experience it differently — and 1 in 12 men live with some form of color vision deficiency. Yet almost every product ships through the eyes of people with perfect vision.

Why? Because accessibility checkers are clunky, and audits only say what's wrong — they never show you what it feels like. So I built A11yCanvas: an empathy , design machine that lives right in your browser and transforms any page you're already looking at, in real time.

What it does

A11yCanvas is a Manifest V3 extension that lets anyone experience the web through the eyes of those who struggle to view it daily. Built for:

1. Developers who want UI/UX that welcomes everyone, regardless of vision defect
2. Everyday internet users trying to be more aware of the struggle billions face in real life

It covers the major vision defects : color blindness (deuteranopia, protanopia, tritanopia), low vision, blur, inversion, tunnel vision, and photophobia — plus support features: a reading ruler, bionic reading, and a dyslexia-friendly font. It also runs a one-click audit that flags missing alt text and low-contrast text against WCAG standards.

How I built it

A no-build, zero-dependency Manifest V3 extension: vanilla JS popup + one content script

• CVD via inline SVG feColorMatrix; blur/invert/grayscale use native CSS filters
• Dyslexia mode injects real @font-face rules for bundled OpenDyslexic OTFs
• Bionic reading bolds the leading 45% of each word , reversible, MutationObserver-tracked, SPA-proof
• Audit pierces shadow roots and composites true backdrops before flagging anything
• Popup auto-injects the script into already-open tabs , instant on any site

Challenges I ran into

• Async filter : the first toggle rendered nothing. Fixed by building the SVG defs inline, synchronously.
• Correct contrast : naive reads failed when an ancestor owned the backdrop. Now the script climbs the tree, composites alpha, and skips ambiguity instead of guessing white.

Accomplishments I'm proud of

1. A working, ship-ready tool — installed and demoing in under a minute
2. Zero-dependency, no-backend architecture
3. Doing something real to raise awareness for vision defects — I know multiple people who live with this daily

What I learned

1. WCAG contrast math: relative luminance with sRGB linearization, not naive hex comparison
2. Backgrounds are layered: a real audit needs ancestor-climbing alpha compositing
3. Manifest V3 quirks — and that every limitation can become a documented feature

What's next for A11yCanvas

• Additional defect simulations
• Pixel-accurate backdrop sampling behind every element
• Click-to-inspect on audit results

Built With

• chome-extension
• css
• design
• html
• javascript
• json
• manifest-v3
• svg