Clearly

• 

• 

• 

• 

Inspiration

The idea for Clearly was born from a shared frustration: even though many websites include accessibility options, they’re often hidden, inconsistent, or incomplete. We wanted to build something universal. A single tool that empowers anyone, regardless of ability, to comfortably browse the web.

Our inspiration came from watching people with dyslexia, color blindness, and vision impairments struggle to navigate everyday sites. Accessibility should not be a privilege limited to well designed platforms. It should be a right that applies everywhere. Clearly bridges that gap.

What it does

Clearly is a Chrome extension that acts as an intelligent accessibility layer over any webpage. It helps users by:

Enhancing readability with dyslexia-friendly fonts (OpenDyslexic, Lexend, Arial) and spacing adjustments.

Providing color-blindness correction using scientifically-backed palettes like Okabe Ito.

Enabling Element Focus Mode, which highlights the content under the cursor with a glowing silver aura while dimming the background.

Offering custom background modes like Night Mode, Reading Mode, and Calm Mode to reduce glare.

Integrating an AI assistant powered by Google Gemini to summarize, explain, or help users navigate content. All in natural, accessible language.

How we built it

We built Clearly as a Manifest V3 Chrome Extension with the following tech stack:

Frontend: React + Tailwind CSS for the popup UI

Content Scripts: Injected accessibility features directly into webpages

AI Integration: Google Gemini API for summarization, Q&A, and contextual understanding

Accessibility Features: Custom CSS injection, real-time DOM parsing, and dynamic event handling for focus and blur effects

Build Tools: Vite for fast React builds and Chrome API for extension logic

The extension dynamically analyzes webpage content, applies accessibility layers, and communicates with Gemini to provide insights or assist navigation. ALL in real time.

Challenges we ran into

Building Clearly came with technical and design challenges:

Cross-Website Compatibility: Making the extension work consistently across dynamic and complex webpages (like scholarly and media articles, social media sites (YouTube, LinkedIn, Discord), and messaging services).

AI Response Optimization: Getting Gemini to summarize and respond naturally without sounding robotic or overly formal.

Performance Tuning: Balancing DOM manipulation, blur effects, and AI calls while keeping the extension smooth.

Content Extraction: Ensuring our content script identifies the most meaningful text while ignoring clutter or hidden elements.

Accessibility for the Extension Itself: Designing Clearly to be usable by the very audiences it serves: keyboard users, screen readers, and visually impaired users.

Accomplishments that we're proud of

Creating a unified accessibility tool that works on any website, not just specially designed ones.

Implementing real-time visual accessibility adjustments that immediately improve usability for diverse users.

Designing a polished “Element Focus Mode” with smooth blur transitions and a silver glowing aura effect that feels both modern and calming.

Seeing people test Clearly and instantly understand its value. Accessibility made simple, elegant, and universal.

What we learned

Throughout the process, we deepened our understanding of both technology and human centered design:

Chrome Extension Development: Manifest V3 architecture, content/background messaging, permissions, and DOM injection.

React Integration: Efficiently embedding React interfaces into Chrome’s popup environment.

AI Integration: Working with Google’s Gemini API for contextual understanding and conversational responses.

Accessibility Standards: Implementing WCAG principles, ARIA roles, and keyboard navigation.

User-Centered Design: How small visual tweaks such as line spacing or color temperature can drastically improve usability.

We also learned that accessibility innovation isn’t just about compliance. It’s about inclusivity and empathy.

What's next for Clearly

Our next steps for Clearly include:

Adding voice interaction and text-to-speech capabilities.

Improving AI navigation assistance (e.g., “Find the contact info on this page”).

Expanding to Edge and Firefox for full cross-browser compatibility.

Partnering with accessibility organizations to make Clearly available to schools, companies, and public institutions.

Our vision:

To make the web a place where everyone, regardless of ability, can see clearly.

Built With

• css
• gemini
• html
• javascript
• manifestv3
• react
• tailwind
• vite