BetterWeb

Inspiration

The internet is the future. As more companies start relying on the internet for all of their practices, such as hiring, shopping, and marketing, we reach a major problem: the internet is not equally accessible to everyone. Individuals with different needs, such as ADHD, dyslexia, epilepsy, autism, visual impairments, and color blindness all face unique challenges when navigating digital spaces. Our goal was to build an intelligent and customizable Chrome extension that improves web accessibility, making online experiences more inclusive and personalized, allowing AI to help with human empowerment.

Keeping with the theme of the hackathon, one of the key innovations in our project is the use of generative AI to enhance color differentiation for colorblind users. By processing images and adjusting their color contrast dynamically for their specific type of color-blindness, we ensure that users with different types of color blindness can perceive visual content more effectively. Additionally, we provide features like text-to-speech and gradual interface adjustments to cater to various accessibility needs.

What it does

Color Blindness Image Optimization: Uses generative AI to process and regenerate images with better color differentiation for users with color blindness. User Needs Profile: Allows users to customize their accessibility experience by selecting specific needs, such as ADHD-friendly layouts, dyslexia-friendly fonts, or epilepsy-safe visual modifications. Dynamic Web Overlay: Applies accessibility modifications automatically or manually based on user preferences. Preview Mode: As users select their preferences, they can preview how an example webpage will change before applying the settings. Text-to-Speech on Highlight: Enables users to have highlighted text read aloud for better comprehension. Text Font and Spacing Feedback & Adjustments: Users can provide feedback on the effectiveness of modifications and request refinements. Gradual Reversion to Default: If users prefer, they can set the extension to slowly transition web pages back to their original state over time, resulting in them slowly becoming accustomed to webpages without these changes present.

How we built it

Using HTML, CSS, JavaScript to create an intuitive user GUI, Chrome Extensions API (Manifest V3) to develop, test, and publish the extension, and Cohere API for keeping a summary of long passages and for integrating within the webpage to enable custom formatting per the user's needs.

Challenges we ran into

AI-Based Image Color Correction: We planned to integrate generative AI to automatically modify image color contrast for different types of color blindness. This was partially implemented but faced limitations due to dynamic image rendering and CSS overrides on many websites. Gradual Reversion of Styles: A setting to slowly fade accessibility changes out over time was explored but posed challenges when reconciling with aggressive site-level stylesheets. Dynamic Overlay for All Websites: While basic modifications work on many sites, deeper accessibility features faced resistance due to heavily scoped CSS frameworks (e.g., Shadow DOM, strict style encapsulation).

Accomplishments that we're proud of

Taking on a task we were all unfamiliar with, as none of us had ever developed using chrome's extension tools before. The massive undertaking that was further emphasized by the W3C (The World Wide Web Consortium). We all rose to the challenge and spent the weekend diving deep into documentations, experimenting, and lots and lots of debugging.

What we learned

Specifically related to programming, we all learned a ton about chrome extension development, using Generative AI within our projects, and how to work collaboratively through Git.

Apart from just the programming aspects, we learned a ton about how the need for more accessible technology is dire. As the world moves towards an entirely digital scope, people with different needs are being left behind, and we as a community should be doing our best to prevent this. Job applications, online shopping, and an infinite amount of more opportunities that everyone should have an equal opportunity to, yet they don't. Combatting this issue is something bigger than just one team completing a project at a hackathon, this is a movement that should be taken on worldwide. This was our biggest takeaway from this wonderful experience.

What's next for BetterWeb

Full integration of generative image enhancement for color blindness Cloud-based profile syncing across devices More granular control over accessibility triggers Real-time accessibility audit and suggestion engine