EqualEyes

Equalize the web; what may be an inconvenience to some can be a barrier for others. How do we enhance accessibility and give users choice in their viewing experience? EqualEyes give you options!

Comment

Inspiration

We wanted to create something that improves accessibility or inclusivity while considering the context of ourselves and our peers. As students, we are constantly staring at our laptops, and often studying at night in the dark, while our laptop screen continues to blare at us. But beyond our own privileged experiences growing up able-bodied, we wanted to consider the unique but very relevant struggles of others, such as individuals who are visually impaired or are simply more sensitive to poorly designed website displays. That is where our idea was born! We wanted to build a Chrome extension allows users to adjust certain features to enhance visibility, and in turn, accessibility.

What it does

Our Chrome extension allows you adjust certain features, such as contrast and text of the website based on standards inspired by the Web Content Accessibility Guidelines (WCAG). These guidelines aim to define “accessibility” with tangible, testable design choices to consider diverse needs. Because every website is designed differently, and everyone has unique needs, one solution does not fix all. So, EqualEyes offers different options that can be toggled at the user's discretion:

  1. Dark mode
    • Darkens the background and makes the text light, so you get a softer, but higher-contrast view that’s easier on the eyes.
  2. High contrast
    • Turns the background pure black and the text white to maximize contrast.
    • This is a more intense option for people who need really strong color distinction to read comfortably.
  3. “Smart” mode
    • Looks at the existing design and changes only the text, so if the background is black, it will turn the text white and vice versa.
    • This is to retain as much of the website’s original look as possible, while still boosting readability for users who just want subtle improvement.
  4. Font size
  5. Accessibility standards require text font size to be at least 16 pixels
  6. If text size is less than 16px change text size to 16px
  7. This is to retain as much of the website’s original look as possible, while still boosting readability for users who just want subtle improvement
  8. If text size is less than 16px change text size to 16px
  9. This is better than simply zooming in because it maintains the integrity and structure of the website, while increasing readability.
  10. This is to retain as much of the website’s original look as possible, while still boosting readability for users who just want subtle improvement
  11. Font spacing
  12. Accessibility standards require line spacing to be at least 1.5 times the font size
  13. If line spacing is smaller than 1.5 times the font size, change line spacing to meet requirements

How we built it

Using JavaScript, HTML, CSS, and online tutorials/debugging with Claude. Lots of struggle. Lots of headache.

Challenges we ran into

A big challenge we ran into while creating this project is that most of us were using languages we had never coded in before until Learn Day. So, it was kind of stressful and a big learning curve getting accustomed to the syntax and conventions. Additionally, we had minimal experience in web design or development in general. Taking what we learn solely in school/on our own and applying it to a real-world circumstance was... daunting. We had other features (such as using AI to create descriptions to be read by alt-text for images that do not already have it, to be inclusive of visually-impaired users) we wanted to implement that included APIs, but after around 5-6 hours of attempting, it still wasn't working out, so we decided to focus on other features.

Accomplishments that we're proud of

We are proud of creating a functioning website that is relatively aesthetically pleasing. We had to be very meticulous and persistent in order to link the files we created separately and standardize their styles. Additionally, we are proud of the logo we made as we feel it added a touch of personality and cuteness to the design. Most importantly, we are proud of our developer for making the actual Chrome extension that allows users to toggle different buttons to apply the different effects (the ones that enhance contrast and font). She did not sleep. She had a nosebleed at 7am. She needs to sleep.

What we learned

We were exposed to new technical skills this weekend such as web design and development. We gained significant experience (compared to our null starting point...) in new, or slightly familiar languages (JavaScript, HTML, CSS). Additionally, it was satisfying to see the application of what we learned at LearnDay (Saturday morning) to BuildNight (just a few hours later!).

What's next for EqualEyes

We want to add more features to enhance visibility and accessibility for an even more diverse pool of needs. This looks like building on the alt-text using AI descriptions idea. We would also like to look at more criteria for the standards given by WCAG, so we can make all websites on the internet equally accessible. The future of EqualEyes also looks like building on current limitations, such as if the background or text is an image or something more complex than a solid color. In the end, we would like for EqualEyes to be used on a larger scale, daily, to improve the lives, eye-health, and access to information (e.g. graphs, other informational images) for all people.

Built With

Share this project:

Updates