An adaptive accessibility Chrome extension that makes any webpage easier to use.
Toggle modes like high contrast, reading fonts, seizure-safe, focus highlighting, and motor (keyboard) support-per tab.
| Mode | What it does |
|---|---|
| High Contrast | Black background, white text, cyan links, yellow focus rings. Reduces eye strain and improves readability. |
| Reading Mode | Applies a reading-friendly font (OpenDyslexic, Lexend, or Comic Sans), increased line height and letter spacing. Keeps code blocks in monospace. |
| Focus Mode | Dims the page and highlights the block under your cursor (paragraph/section). Helps focus on one area (ADHD-friendly). |
| Motor Accessibility | Visible focus outlines, “Skip to main content” link, larger click targets (44×44px min), and keyboard activation for clickable elements. |
Modes are saved per tab: switch tabs and come back, or refresh the page, and your choices are restored.
- Clone or download this repo.
- Open Chrome and go to chrome://extensions.
- Turn on Developer mode (top right).
- Click Load unpacked and select the ease-extension folder.
- Pin the WebEase icon in the toolbar if you like.
- Open any normal webpage (e.g. wikipedia.org, a news site).
(Does not run on chrome://, New Tab, or the Chrome Web Store.) - Click the WebEase icon in the toolbar.
- Turn on any mode with its button; turn it off again to restore the page.
- Use the Reading Mode Font dropdown to pick OpenDyslexic, Lexend, or Comic Sans when Reading Mode is on.
- Chrome Extension Manifest V3
- Content scripts inject styles and a skip link; no remote APIs
- Per-tab state stored in
chrome.storage.local; background script serves state so modes re-apply after reload
WebEase/
├── ease-extension/
│ ├── manifest.json
│ ├── popup.html, popup.js, popup.css
│ ├── background.js
│ ├── content/
│ │ ├── contentScript.js # message handling + reapply state
│ │ ├── utils/dom.js # inject/remove style tags
│ │ └── modes/
│ │ ├── contrastMode.js
│ │ ├── readingMode.js
│ │ ├── seizureSafe.js
│ │ ├── focusMode.js
│ │ └── motorMode.js
│ ├── content/assets/ # reading fonts (woff2/ttf)
│ ├── icons/
│ └── styles.css
└── README.md
- Introduce GrayScale Mode for users with colour sensitivity needs
- Launch Seizure Safe Mode which disables animations and pauses videos to prevent flashing triggers.
- Support theme customization for Contrast Mode
- Publish WebEase publicly on the Chrome Web Store
Built for HackED 2026 - DivE
https://docs.google.com/presentation/d/12LKN0tW8RdcWlu8arxfcGp0HZkTxt5V5fYcbWICHZwQ/edit?usp=sharing