Color Blindness Simulator — Design for Everyone
Approximately 300 million people worldwide experience some form of color vision deficiency. This tool lets you see your designs through their eyes — before your users do.
Upload a screenshot, UI mockup, or any image and see it transformed across four types of color blindness in seconds — all processed locally in your browser.
Normal Vision
Protanopia
Deuteranopia
Achromatopsia
Types of Color Vision Deficiency
Protanopia
Caused by the absence of red cone cells (L-cones). Reds appear very dark or black. Red-green distinctions are completely lost. Traffic lights and stop signs can appear the same colour as surrounding foliage.
Deuteranopia
The most common form of colour blindness. Caused by absent green cone cells (M-cones). Red and green are easily confused. Affects roughly 1 in 12 males of Northern European descent.
Tritanopia
Caused by absent blue cone cells (S-cones). Blue-yellow distinctions are lost. Blues may appear green, and yellows may appear violet or light grey. Affects males and females equally.
Achromatopsia
Complete absence of functioning cone cells. The world appears entirely in shades of grey. Also accompanied by sensitivity to bright light (photophobia) and reduced visual acuity. Extremely rare but important to consider.
How the Simulation Works
This tool uses the Machado, Oliveira, and Fernandes (2009) physiologically-based model — the industry standard for colour vision deficiency simulation, used by professional accessibility tools and research applications.
Each pixel's RGB values are first linearized (gamma-decoded from sRGB), then multiplied by a 3×3 transformation matrix that models the altered cone response for each condition. The result is then re-encoded back to sRGB for display.
All processing happens entirely in your browser using the Canvas API. Your images are never uploaded to any server. For large images, processing is chunked into small batches to keep the UI responsive and show real-time progress.
Designing for Color Vision Deficiency
Never use color as the only signal
Add icons, patterns, labels, or shapes alongside color. A red error state should also have an error icon and text.
Test contrast ratios
Use the Contrast Checker to verify text and background combinations pass WCAG AA (4.5:1) under all vision conditions.
Avoid red-green combinations
The most common deficiency (deuteranopia) makes red and green indistinguishable. Use blue-orange as a safe high-contrast pair instead.
Use patterns in charts and graphs
Don't rely on color alone to differentiate data series. Add different line styles, fill patterns, or direct labels.
Test with real users
Simulation is a useful starting point, but testing with actual users who have CVD gives you the most accurate feedback.
Simulate early and often
Fixing colour accessibility at the design stage is far cheaper than refactoring a shipped product. Build simulation into your design review process.
Frequently Asked Questions
Is my image uploaded to a server?
No. All processing happens entirely in your browser using the HTML5 Canvas API. Your images never leave your device. There are no server requests, no storage, and no privacy risk.
How accurate is the simulation?
The tool uses the Machado et al. (2009) model, which is the most physiologically accurate simulation method currently available for web applications. It is the same model used by professional accessibility tools like Coblis and Color Oracle.
Why does processing take longer for large images?
Every pixel in the image must be transformed individually through a matrix calculation. A 5MB image at full resolution can contain millions of pixels. The tool processes in chunks to keep the UI responsive and show progress rather than appearing to freeze.
What image formats are supported?
JPEG, PNG, WebP, GIF, and AVIF up to 5MB. These cover the vast majority of design assets and screenshots you would want to test.
Can I download the simulated images?
Yes — each simulation card has a download button that exports the processed image as a PNG file, named with the original filename and the condition type appended.
Does this test for WCAG compliance?
This tool simulates visual appearance but does not calculate contrast ratios. Use it alongside the Contrast Checker for full WCAG compliance testing.
Build Interfaces Everyone Can Use
300 million people experience colour vision deficiency worldwide. Simulating their experience takes seconds — and can prevent real accessibility barriers in your product.
Free, private, no signup. Part of Pacgie's accessibility and colour tool suite.