ClearView: A Browser-Based Accessibility Tool

• 

  page 1

• 

  page 2

• 

• 

Inspiration

Modern websites are often designed for engagement rather than clarity. I noticed that many interfaces feel visually overwhelming, with sidebars, pop-ups, and inconsistent contrast competing for attention. This becomes especially frustrating for users experiencing visual strain, colour confusion, or cognitive overload. I wanted to explore how a lightweight tool could make everyday browsing calmer and more usable without changing how people normally use the web.

What it does

ClearView is a browser-based accessibility concept that reduces visual clutter and improves readability on dense webpages. It introduces simple, high-impact adjustments such as clutter reduction, contrast enhancement, and a focused reading layout. Instead of redesigning entire websites, ClearView adapts pages in real time to make them easier to perceive and navigate.

How I built it

This project was developed as an HCI-focused prototype using Figma and HTML. I designed a before-and-after interface flow to demonstrate how a cluttered webpage can be transformed into a cleaner, more readable experience. The focus was on usability, visual hierarchy, and clarity rather than full implementation. Generative AI was used for code and assets, i.e. logo.

Challenges I ran into

The main challenge was balancing scope with realism. It is one thing to design a system that tries to solve every accessibility issue, but that quickly becomes unmanageable. I had to narrow the project to a few core features that could be clearly demonstrated in a prototype. Another challenge was translating abstract ideas like “cognitive overload” into concrete interface changes that could be shown visually. I kept it simple as a beginner.

What I learned

I learned how important it is to define a specific user and problem early. Strong HCI work is not about adding features, but about making deliberate trade-offs. I also learned how to communicate design decisions clearly through mock-ups and structured presentation.

Future work

With more time, this project could be developed into a real browser extension (via JavaScript) that dynamically modifies webpages based on user preferences. Future improvements could include customizable presets, adaptive contrast for different types of colour vision, and more refined content prioritization.

Built With

• accessibility
• cognitive-load
• figma
• hci-design-principles
• html
• readability
• usability
• usability-research-(accessibility