Borrowed Eyes

Borrowed Eyes makes any website instantly accessible with dyslexia-friendly, high-contrast, colorblind, and focus modes, plus AI summaries and saved sessions using MongoDB.

Comment

Inspiration

We built Borrowed Eyes because the internet is not equally accessible to everyone. Many people struggle with reading online content due to dyslexia, low contrast sensitivity, colorblindness, or difficulty focusing. We wanted a simple tool that lets users instantly reshape any website into a version that works for their needs, instead of forcing them to adapt to the design. Our goal was to make accessibility effortless, beautiful, and universal.

What it does

Borrowed Eyes transforms any website into multiple accessibility-friendly versions in just one click. A user enters a URL, chooses an accessibility mode, and the site immediately reloads inside our viewer with new fonts, colors, spacing, or overlays tailored to their needs. Modes include dyslexia-friendly text, high-contrast layouts, daltonization for colorblind users, and a distraction-free focus mode. The app also includes an AI-powered explanation panel where Google Gemini generates simplified summaries of the page, making dense or complex content easier to understand. MongoDB stores the user’s recent sites and mode selections so they can easily return to previously visited pages.

How we built it

Borrowed Eyes is built as a full-stack web application using React and Vite on the front-end and an Express proxy server on the back-end. When a user enters a URL, the server fetches the site’s HTML, sanitizes it, and injects hand-crafted CSS rules depending on the chosen mode. The front-end uses a glassmorphic design system with smooth animations, responsive layout, and pill-based controls for mode switching. The Gemini API integrates through the backend, processing the fetched content and returning a clean, accessible summary. MongoDB Atlas serves as our data layer, storing session history and user actions for quick retrieval.

Challenges we ran into

One of our biggest challenges was injecting CSS into external websites without breaking their layout or functionality. Handling cross-origin content, sanitizing HTML safely, and supporting iframe rendering all required careful proxying. Designing a visually polished interface that still met accessibility guidelines was another challenge, especially when balancing aesthetics with usability. Integrating the Gemini API securely and managing asynchronous summarization added extra complexity. Debugging CORS issues and ensuring consistent styling across hundreds of possible websites also took a significant amount of time.

Accomplishments that we're proud of

We’re proud that Borrowed Eyes actually works on nearly any website and transforms it in real time. Each accessibility mode has been hand-built to meet real assistive needs, rather than relying on generic filters. The glassmorphic UI looks premium while remaining functional and user-friendly. Our AI explanation feature adds meaningful value by helping users understand dense content. Combining React, Express, MongoDB, and Gemini into a polished and reliable experience within a short timeframe is something we’re extremely happy with.

What we learned

Through this project we learned how complex web accessibility really is and how much thoughtful design goes into making content readable for everyone. We gained experience in safely modifying external HTML, working with proxies, sanitizers, and injected CSS. We also learned more about colorblindness simulation, dyslexia-optimized typography, and high-contrast design principles. Integrating large-language-model APIs securely taught us about handling environment variables, backend API routing, and response optimization. Overall, we learned how to blend accessibility, AI, and design into a cohesive product.

What's next for Borrowed Eyes

In the future, we want to expand Borrowed Eyes into a browser extension so users can instantly restyle any page without pasting URLs. We also plan to add user accounts for saving personal preferences, new accessibility modes like ADHD-friendly layouts or simplified reading levels, and advanced Gemini-powered features such as voice explanations or interactive page summaries. We hope to continue refining the UI, supporting more websites, and growing Borrowed Eyes into a universal accessibility companion for the entire web.

Share this project:

Updates