Access Lens

Inspiration

Many websites are not built with accessibility in mind, making the internet difficult to navigate for people with visual impairments, dyslexia, or ADHD. We wanted to create a tool that not only helps users adapt websites to their needs but also encourages developers to build more accessible sites from the start.

What It Does

Our Chrome extension is an accessibility tool providing support for visual impairments, ADHD, and dyslexia.

Color Blindness Support

We provide a contrast enhancement tool that adjusts colors to reduce clashing for users with various types of color blindness.

Visual Impairment Support

We have a rating system that scores each website on Google search results based on accessibility criteria including alt-img tag ratio, proper heading hierarchy (h1 > h2 > h3), semantic HTML usage, and ARIA labels. This extension can be used by developers and site maintainers to identify and improve accessibility issues on their websites.

Low Accessibility Pages

For pages with low accessibility ratings, we offer AI-generated descriptions for images missing alt tags.

Dyslexia Support

We provide the OpenDyslexic font, adjustable letter spacing, font sizing, and bold text all designed specifically to improve readability for people with dyslexia.

ADHD Support

We offer text simplification using AI to rewrite complex sentences into simpler, easier to read versions.

How We Built It

We built Access Lens as a Chrome Extension using Manifest V3. The frontend popup uses HTML, CSS, and vanilla JavaScript. For content manipulation, we inject a content script that modifies page styles and text in real time.

The backend is an Express.js server hosted on Render that handles API calls to Cohere for text simplification and Gemini for image descriptions. We used Chrome’s storage API to persist user preferences across sessions.

Challenges We Ran Into

When collecting URLs from Google search results, it worked locally, but the browser extension kept getting blocked by CORS policies designed to prevent CSRF attacks. We solved this using extension background mediation the background service worker fetches URLs on behalf of the content script.

When running the Gemini API for image descriptions, the extension got stuck in a loop causing over 5,000 API requests a scary moment for my wallet. Luckily, there was built-in rate-limiting protection.

Another challenge was selecting the right model. I benchmarked all available Gemini models, and gemini-2.0-flash was the fastest for our use case. Through pure coincidence, it also had the most generous rate limits a happy revelation.

Accomplishments That We’re Proud Of

Getting the Gemini and Cohere APIs working seamlessly within a browser extension
Cloud hosting our first API endpoint from scratch using Render
Building a complete accessibility toolkit that addresses multiple different needs
Learning how to work around browser security restrictions in extensions

What We Learned

How Chrome Extension architecture works (content scripts, background workers, message passing)
How to handle CORS restrictions using background service workers
The importance of rate limiting when working with external APIs
How to deploy and host a Node.js backend
The real accessibility challenges people face daily and how small changes can make a big difference

What’s Next for Access Lens

More color blindness modes: Support for protanopia, deuteranopia, and tritanopia with specific color adjustments
Persistent settings: Automatically apply user preferences when revisiting pages
Screen reader integration: Better compatibility with existing assistive technologies
Browser support: Expand to Firefox and Edge
Detailed accessibility reports: Generate downloadable reports for developers to fix accessibility issues
Community feedback: Allow users to rate and report accessibility issues on websites