Fix color accessibility
before users complain.
Scan any webpage, preview color blindness, and get copy-paste Tailwind, shadcn/ui, and CSS variable fixes — instantly.
Button text has poor contrast
text-gray-400text-gray-700Heading meets AA standard
h1.hero-titletext-foreground on bg-backgroundFeatures
Everything you need to ship
accessible color palettes
Not just another score. ColorProof gives you the exact code to fix every contrast issue — in your framework, your tokens, your workflow.
One-Click Page Scan
Instantly audit any live webpage for low contrast text, unreadable buttons, invisible placeholders, and color-only states.
Color Blindness Preview
Switch between Protanopia, Deuteranopia, Tritanopia, and Achromatopsia to see exactly what your users see.
Framework-Aware Fixes
Get copy-paste fixes for Tailwind classes, shadcn/ui CSS variables, and plain CSS — not just a failing score.
Visual Overlay
Red for fail, yellow for warning, green for pass. Click any element to see the issue and its fix right on the page.
Export Reports
Generate Markdown, JSON, or GitHub-ready issue text. Paste directly into PRs, Jira tickets, or Notion docs.
Token-Aware
Understands shadcn/ui semantic tokens like --primary, --muted-foreground, and --destructive. Fixes your design system, not just raw hex.
How it works
Three steps to accessible colors
Scan any page
Click the ColorProof icon in your browser. The extension scans the DOM, extracts computed styles, and checks every element against WCAG contrast rules.
// ColorProof scans the DOM
const elements = document.querySelectorAll('*');
elements.forEach(el => {
const fg = getComputedStyle(el).color;
const bg = getComputedStyle(el).backgroundColor;
const ratio = getContrastRatio(fg, bg);
// → 2.1:1 — FAIL (needs 4.5:1)
});Preview color blindness
Toggle between Protanopia, Deuteranopia, Tritanopia, and Achromatopsia. See exactly what 300M+ people experience on your page.
// Simulate vision deficiencies
applyFilter("protanopia");
// Red-green confusion: your error states
// may look identical to success states.
applyFilter("deuteranopia");
// Most common type — affects ~6% of men.
// Green buttons → brownish. Red text → dim.Copy the fix
Every failing element gets a framework-specific fix. Copy a Tailwind class, update a shadcn/ui variable, or grab the raw CSS — one click.
// Issue: Button text has poor contrast
// Current: bg-red-500 text-white → 3.76:1
// Required: 4.5:1 (WCAG AA)
// ✓ Tailwind fix:
className="bg-red-700 text-white"
// ✓ shadcn/ui fix:
--destructive: 0 72% 42%;
--destructive-foreground: 0 0% 100%;Why ColorProof
From score to source code
Other tools tell you what's broken. ColorProof tells you how to fix it — in your stack.
Trusted by developers
Developers love the workflow
“I spent hours manually checking contrast ratios. ColorProof gives me the exact Tailwind class to use in seconds.”
“As someone with deuteranopia, I finally have a tool that understands the problem — because the creator lives it too.”
“The shadcn/ui variable fixes alone saved our team days of manual work during our accessibility audit.”
Pricing
Start free. Upgrade when you need.
Every plan includes the core scan engine. Pro and Team unlock the full fix pipeline.
Free
Perfect for personal projects and quick audits.
- Scan current page
- Top 10 issues detected
- Basic contrast report
- Color blindness preview
Pro
For developers who ship accessible products.
- Unlimited page scans
- Full issue detection
- Tailwind & shadcn/ui fixes
- CSS variable patches
- Export to Markdown & JSON
- Visual page overlay
Team
For agencies and engineering teams.
- Everything in Pro
- Brand token presets
- Shareable reports
- Saved audit history
- GitHub issue integration
- Priority support
Get early access
Be the first to try ColorProof
Join the waitlist and get notified when we launch on the Chrome Web Store. Early supporters get Pro free for 3 months.
No spam. Unsubscribe anytime. We respect your inbox.