What Is a Color Blindness Simulator?
A color blindness simulator is a tool that transforms any image, mockup, or web page to show how it appears to individuals with color vision deficiencies. Instead of guessing how your colour choices land for colorblind users, you can see an accurate approximation of their visual experience — directly in your browser, before shipping a single line of code.
Colour blindness affects about 1 in 12 men and 1 in 200 women worldwide. Colour confusion caused by poor colour contrast can hide interface elements, reduce readability, and lower conversions. This free color blindness simulator helps designers, developers, and product teams identify and fix those problems early — so your product works for everyone.
Normal Vision
Protanopia
Deuteranopia
Achromatopsia
Types of Color Vision Deficiencies
Color vision deficiencies vary widely in type and severity. This simulator covers all major types of color vision deficiencies — from the most common red-green variation to complete colour blindness.
Protanopia
Caused by absent red cone cells. Reds appear very dark or indistinguishable from green. Traffic lights and status indicators are common problem areas. Protanopia is one of the red-green deficiencies this simulator covers with full severity adjustment.
Deuteranopia
The most common colour deficiency. Absent green cone cells cause red and green to appear nearly identical. Deuteranopia affects roughly 1 in 12 males and is the primary reason red-green colour combinations should be avoided in UI design.
Tritanopia
Absent blue cone cells cause blue and yellow confusion. Blues may appear green, and yellows may look violet or grey. Tritanopia affects males and females equally and is less common but still important to simulate for colour system design.
Achromatopsia
Complete absence of functioning cone cells. The entire world appears in shades of grey. Though rare, achromatopsia is the most severe colour vision deficiency and tests whether your design relies entirely on colour to communicate meaning.
Features of This Colour Blindness Simulator
This colour blindness simulator is built as a practical design and development resource — not just a visual demo. Every feature is designed to fit real accessibility workflows.
Multiple Vision Types
Simulate protanopia, deuteranopia, tritanopia, achromatopsia, and varying degrees of anomalous trichromacy. Each vision type uses a separate colour transformation to accurately model the difference in how colour appears to individuals with each deficiency.
Live URL Testing
Enter any website address and preview the full web page through each colour vision simulator mode instantly. Test your live product, staging environment, or any public web page — no screenshot needed.
Upload Images and Mockups
Choose an image — PNG, JPG, or SVG — to simulate colour blindness across logos, icons, UI screens, and illustrations. All image processing runs locally in your browser. Your files are never sent to a server.
Adjust Severity
Fine-tune simulation strength to model mild to severe colour vision deficiency. Real-world CVD exists on a spectrum — the severity slider lets you test across the full range rather than only the most extreme case.
Side-by-Side Comparison
View the original colour image and the simulated output side by side. This comparison view speeds up design iteration — adjust your colour palette, re-upload, and immediately see the difference across all vision types at once.
Contrast Analysis and Export
Automated contrast warnings flag combinations that fail WCAG AA or AAA standards. The developer export generates accessible colour recommendations and CSS variables directly — ready to apply without additional conversion.
How the Simulator Works
This colour blindness simulator uses the Machado et al. (2009) physiologically-based algorithm — the same model used by professional tools like Coblis, DaltonLens, and ColorJack — to produce an accurate simulation of colour vision deficiency.
Paste a URL or Upload an Image
Enter a website address to test a live page, or upload an image mockup directly. The simulator accepts PNG, JPG, SVG, and WebP files up to 5MB and processes them entirely in your browser using the Canvas API — similar to how Google Chrome's built-in accessibility tools and Android accessibility features handle display simulation.
Select Vision Type and Adjust Severity
Choose which colour deficiency to simulate and adjust severity to model anything from mild to severe CVD. The simulation applies a colour transformation matrix — based on the convert.imageencoding.linear_rgb filtered approach from the HCIRN color blind simulation function — to accurately represent each condition.
View Simulated Output and Contrast Scores
The simulator displays the transformed image in real time alongside automated contrast analysis. Colour pairs that fail WCAG standards are flagged immediately. The side-by-side view makes it straightforward to spot problem areas at a glance.
Export Fixes and Download Results
Apply suggested accessible colour changes directly or export CSS variables for developer handoff. Download the simulated image as a PNG for use in design documentation, accessibility reports, or stakeholder reviews.
Benefits for Designers and Developers
Improve Usability
Ensure buttons, charts, and status indicators are visible across all vision types — not just normal colour vision.
Increase Reach
Make your digital product accessible to the hundreds of millions of users living with colour vision deficiencies worldwide.
Save Time
Catch colour accessibility issues before development handoff. Fixing colour in a design file takes minutes; fixing it in production takes much longer.
Meet Standards
Align with WCAG accessibility guidelines. The contrast analysis feature flags specific failures and suggests fixes to help you comply.
Common Use Cases
UI and UX design reviews
Marketing creatives and infographics
Data visualizations and dashboards
Branding, logos, and colour systems
Front-end QA and accessibility audits
Ishihara plate and vision test design
Frequently Asked Questions
What types of colour blindness can I simulate?
+
This app supports protanopia, deuteranopia, tritanopia, achromatopsia, and varying degrees of anomalous trichromacy. Each condition is modelled separately using a physiologically-based colour transformation, so the simulation reflects the actual variation in how colour vision deficiency presents across individuals — not a one-size approximation.
Will the simulator guarantee WCAG compliance?
+
The tool highlights contrast issues and provides colour recommendations, but full WCAG compliance requires checking across all content and interaction states. Use this simulator alongside a dedicated contrast checker and manual accessibility testing for complete coverage.
Is my image uploaded to a server?
+
No. All image processing runs entirely in your browser using the Canvas API. Your images never leave your device — there are no server requests, no storage, and no privacy risk. This is true for both uploaded images and URL-fetched pages.
How is this different from software like Coblis or DaltonLens?
+
This free color blindness simulator uses the same Machado et al. algorithm as Coblis and DaltonLens, so the simulation accuracy is comparable. The key difference is that this tool is fully browser-based with no software install, supports live URL testing alongside image upload, and includes built-in contrast analysis and developer CSS export in a single workflow.