Project Overview
ColorProof is a Chrome extension for frontend developers that scans webpages for color accessibility issues, simulates color blindness, and suggests copy-paste fixes for Tailwind, shadcn/ui, and CSS.
Problem
Accessibility checks are often separated from day-to-day frontend work, making it easy to miss contrast problems until late QA or after release.
Solution
ColorProof brings scanning, simulation, and practical fix suggestions into the browser so developers can identify and resolve issues while reviewing the actual page.
Key Features
- WCAG contrast checks
- Color blindness simulation
- Tailwind/shadcn/ui fix suggestions
- Developer-focused browser workflow
Technical Decisions
The extension combines a React and TypeScript UI with page scanning logic tailored to frontend workflows. The fix suggestions are shaped for common styling systems instead of generic color advice.
UI/UX Decisions
The UI prioritizes scan results, visual previews, and quick code fixes so developers can move from issue to action without context switching.
Challenges
The main challenge is translating accessibility findings into fixes that feel useful for real design systems and not just theoretical contrast numbers.
Result
Developers can test a live webpage, understand how color choices affect users, and apply practical Tailwind, shadcn/ui, or CSS fixes faster.
Screenshots
