Color Blindness Simulator
Color blindness simulator to test UI designs, screenshots, and artwork under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
Browser onlyYour data never leaves this device.
All color transformations run 100% locally in your browser canvas. No images or screenshots leave your device.
Details: Privacy policy
Drop files here or Browse
Drag and drop works here too.Test how your UI designs, graphics, branding, and dashboard charts appear to individuals with different types of color vision deficiency (CVD). This professional accessibility simulator models Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (complete monochrome color blindness) using calibrated transformation matrices directly inside your browser canvas. With interactive side-by-side split comparison, variable deficiency severity levels, and instant screenshot downloads, product teams, UX researchers, and frontend developers can identify illegible button states, ambiguous charts, and low-contrast typography before shipping software. Meet WCAG 2.1 AAA visual compliance with 100% private in-browser image simulation.
How to use Color Blindness Simulator
- Upload a screenshot, mockup, or image design.
- Select the color blindness condition you want to test (Protanopia, Deuteranopia, etc.).
- Adjust the severity level or switch to Side-by-Side comparison mode.
- Download the simulated image to share with design and QA teams.
When to use Color Blindness Simulator
- Verify that UI buttons, alerts, and charts remain distinguishable for color-blind users.
- Perform accessibility audits before shipping product designs and websites.
- Test marketing banners and posters to ensure text and call-to-action contrast.
Frequently asked questions about Color Blindness Simulator
Which color blindness type is the most common?
Deuteranomaly and Deuteranopia (green weakness and green blindness) are by far the most common, affecting approximately 6% of the global male population.
How do I ensure my UI is accessible according to WCAG?
Never rely solely on color to convey information. Combine color with distinct icons, clear text labels, underlines for links, and maintain high luminance contrast.
Does this tool upload my design to any server?
No. Every pixel is processed locally in real time using HTML5 Canvas pixel manipulation in your browser.
Tools related to Color Blindness Simulator
- Contrast Checker
Check WCAG AA and AAA contrast for any text and background colour pair, with a fix suggestion.
- Image Color Picker — sample exact pixel colours from an image and read them
Sample exact pixel colours from an image and read them as HEX, RGB, and HSL values.
- Color Converter
Convert any colour between HEX, RGB, HSL, HSV and CMYK, with WCAG luminance.
- Aspect Ratio Calculator — reduce two dimensions to their simplest ratio
Reduce two dimensions to their simplest ratio, find the missing width or height, and check a size against a ratio.
- Base64 to Image
Decode a data URL or raw Base64 string back into a verified PNG, JPEG, WebP, or GIF image.
- Rotate Image — turn a photo or graphic by 90
Turn a photo or graphic by 90, 180, 270, or any custom angle and save it again.
⚡Embed Color Blindness Simulator on Your Site & Get Badge↓
Embed this in-browser tool into any blog, documentation, or dashboard. Includes an optional dofollow backlink badge to credit Tools Hub.
<iframe src="https://salaq.com/embed/image/color-blindness-simulator" title="Color Blindness Simulator — Tools Hub" width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden;max-width:100%;" loading="lazy"></iframe>
<p style="font-size:12px;color:#6b7280;margin-top:6px;font-family:system-ui,-apple-system,sans-serif;">Powered by <a href="https://salaq.com/tools/image/color-blindness-simulator" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;">Color Blindness Simulator on Tools Hub</a></p>Feedback
Send feedback about this tool (placeholder — feedback collection is not wired up yet).