CSS & Design
Color Blindness Simulator
See how any color or image URL looks to someone with protanopia (red blind), deuteranopia (green blind), tritanopia (blue blind), or achromatopsia (full monochrome). Uses CSS filter matrices to simulate each condition. Useful for testing contrast and accessibility compliance before shipping.
Runs in your browser
Nothing uploaded
Free, no signup
Ctrl + Enter to run · Recent brings back your last inputs · Everything stays in this browser
FAQ
Color Blindness Simulator: questions
How accurate is the simulation?
The SVG color-matrix values are established approximations based on published chromatic adaptation matrices (Brettel, Viénot, Mollon). They are not 100% clinically exact but are widely used in accessibility tooling.
Does this replace a real accessibility audit?
No — it is a quick sanity check. For production accessibility work, use a dedicated tool or test with actual color-blind users.
What is the most common form of color blindness?
Deuteranopia (green-blind) and deuteranomaly together affect about 5–6% of men. Protanopia/anomaly affects about 2%. Tritanopia is rare, under 0.01%.
CSS Minifier & Beautifier
Compress or format CSS
SVG Optimizer
Minify and clean SVG markup
Website Accessibility Audit
Crawl a page for WCAG risks
CSS Grid Generator
Visual grid layout builder
CSS Flexbox Generator
Build flexbox layouts visually with live preview
SVG to CSS Data URI Encoder
SVG as background-image
Made something with AI? Share it as a private link.
Drop in the HTML from Claude, ChatGPT or any editor and get a link your client can open anywhere — with a password, view tracking, comments and approval.