Visibly

Visibly

Inspiration

The internet is the world’s most powerful communication platform — we use it to learn, connect, and share every day. But for millions of people with visual impairments, that communication is often disrupted by poor accessibility. Whether it’s struggling to read small text or interpret colors, these barriers make it harder to receive and understand information — and that impacts how we engage with the world. We were inspired to build Visibly to bridge that gap. By making online content easier to see and read, we’re not just improving visibility — we’re enhancing the ability to communicate. Everyone deserves equal access to the conversations, knowledge, and communities the web enables.

What it does

Visibly is a Chrome extension that helps make the web more accessible for people with color vision deficiencies. It allows users to toggle font enhancements and colorblind-friendly adjustments on any website. With simple on/off switches and customizable settings like font size, users can instantly improve readability and usability based on their needs.

How we built it

We built Visibly using React for the UI and JavaScript with Chrome Extension APIs to inject accessibility features directly into webpages and used localStorage to persist user preferences and CSS manipulation to adjust font styles, contrast, and color schemes dynamically. Everything is wrapped in a clean, intuitive interface designed to feel native and easy to use.

Challenges we ran into

Getting real-time updates to reflect properly without reloading pages.
Managing CSS injection in a way that doesn’t conflict with existing website styles.
Ensuring the toggle switches and UI stay responsive inside the Chrome extension popup, which has strict sizing and DOM rules.
Aligning icons, labels, and buttons in a clean layout that looks good across different settings.

Accomplishments that we're proud of

Successfully implemented real-time font resizing and colorblind adjustments.
Designed a polished and accessible UI that feels modern and intuitive.
Learned how to build a Chrome extension from scratch with a dynamic React frontend.
Made the product work across any site without disrupting the user's experience.

What we learned

How to use Chrome extension APIs with React effectively.
The importance of accessibility and how small UI changes can significantly improve user experience.
A deeper understanding of local storage, event listeners, and DOM manipulation in real-world use.
How to design user-friendly components with flexibility and simplicity in mind.

What's Next for Visibly

Add support for other accessibility features like high contrast modes and dyslexia-friendly fonts.
Add a text-to-speech feature that reads webpage content aloud, helping users with dyslexia, low vision, or reading difficulties.
Allow users to save presets and auto-apply them to specific domains.
Offer keyboard-only navigation for better assistive technology compatibility.
Publish the extension on the Chrome Web Store and gather feedback from the accessibility community.