RetinAI

🧠 RetinAI: Every Page, Tailored to You

💡 Inspiration

The internet is meant to be universal — but for millions, it’s not truly accessible. We noticed that most accessibility tools are one-size-fits-all: high contrast mode, screen readers, or zoom. Helpful, yes — but impersonal.

People with ADHD, dyslexia, color blindness, or vision sensitivities experience the web differently — so why should their tools all look the same? That question inspired us to build RetinAI — an AI-powered browser extension that personalizes any website to an individual’s accessibility needs.

🌍 What It Does

RetinAI dynamically restyles or rewrites webpages based on each user’s accessibility profile. It doesn’t apply a static filter; instead, it thinks and adapts using AI.

For users with ADHD → breaks long text into smaller, focused chunks and highlights key ideas.
For dyslexia → applies OpenDyslexic fonts and improves word spacing.
For color blindness → adjusts color palettes or outlines color-coded visuals.
For vision impairments → simplifies layout, increases contrast, or even generates spoken summaries via ElevenLabs.
Other preferences → Tracks trends and applies your preferences based on your usage.

In short — RetinAI doesn’t just make the web accessible. It makes it personal.

🏗️ How We Built It

We built RetinAI as a Chrome extension powered by a Node.js + Firebase backend, Gemini API for reasoning, and Snowflake for secure data analytics and trend learning.

The content script extracts webpage data and sends it to the backend.

Gemini analyzes user preferences and the page’s visual style, generating precise CSS or text transformations.

The extension then injects these updates live, seamlessly re-rendering the page in a more accessible form.

Firebase Firestore stores user profiles, accessibility feedback, and real-time ratings.

Snowflake API aggregates cross-user accessibility data, letting RetinAI identify global design trends for inclusivity.

ElevenLabs generates natural audio summaries for users who prefer auditory support.

🧩 Built With: JavaScript · HTML · CSS · Node.js · Firebase · Gemini API · ElevenLabs · Snowflake

⚙️ Challenges We Ran Into

Our biggest challenges were stability and personalization. Injecting dynamic CSS from an LLM often broke site layouts — so we built a parser that safely merged AI-generated suggestions.

Ensuring Gemini’s structured responses stayed consistent across page types took multiple prompt engineering iterations. We also had to balance accessibility and aesthetics — how do you make something readable and visually appealing? Finding that equilibrium became both a design and engineering challenge.

🏆 Accomplishments We’re Proud Of

We successfully created an agentic system that understands and adapts to human needs in real time.

Gemini now infers what a user struggles with and self-adjusts styles accordingly.

Firebase + Snowflake track and learn patterns across ratings, so the system evolves with every interaction.

We demonstrated a live site transformation from cluttered to clean in seconds — a “wow” moment that showed real empathy in code.

That first instant where RetinAI understood what accessibility meant — that was pure magic.

📚 What We Learned

We learned that accessibility isn’t just a feature — it’s a form of empathy. True accessibility is personal, not universal.

Technically, we mastered combining reasoning models with real-time DOM manipulation, asynchronous Chrome messaging, and persistent learning via Firebase + Snowflake. But beyond code, we realized that AI’s true potential lies not in automation, but in human adaptation — making technology that understands you.

🚀 What’s Next for RetinAI

We plan to expand RetinAI beyond style edits into content-level personalization:

Summarizing dense text for neurodivergent readers.

Rephrasing technical jargon for clarity.

Introducing “Focus Modes” tailored for students, professionals, or accessibility types.

We’re also developing multi-profile support, so users can easily switch between modes — for example, dyslexia-friendly, low-vision, or distraction-free.

Our ultimate vision:

A web that doesn’t just include everyone — it understands everyone. 🌐❤️