Color vision deficiency (CVD), commonly known as color blindness, affects approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) globally. For a website serving 10,000 visitors per day, that is roughly 800 users navigating your interface with significantly altered color perception.
This has real consequences. If your UI relies entirely on color to communicate state — a red border for errors and a green border for success — color-blind users may be unable to tell them apart. A color blindness simulator lets designers and developers preview their designs through the visual experience of users with different types of CVD — no sign-up, no account, free in your browser.
Simulate Color Blindness Online
Color Blindness Simulator
Simulate Protanopia, Deuteranopia, Tritanopia, and Achromatopsia on colors and images.
How to Use the Color Blindness Simulator
Step 1: Upload Your Design
Click the upload area or drag and drop a screenshot, UI mockup, or any image you want to test. The image is processed locally — never uploaded to a server.
Step 2: Select the Color Vision Type
Choose one of the simulation modes from the selector: Deuteranopia, Protanopia, Tritanopia, or Achromatopsia.
Step 3: Compare Side by Side
The tool renders your image with the selected color vision simulation applied. Compare the original and simulated versions to identify which elements lose distinguishability.
Step 4: Adjust Your Design
Note any areas where color is the only visual differentiator and update them to also include text labels, icons, patterns, or shapes.
Types of Color Vision Deficiencies
Color blindness is caused by the absence or malfunction of light-sensitive photopigments in the cone cells of the retina. Human eyes have three types of cones, each sensitive to a different wavelength range: Long (red-sensitive), Medium (green-sensitive), and Short (blue-sensitive).
Red-Green Deficiencies (Most Common)
These are the most prevalent forms, affecting approximately 8% of men and 0.5% of women.
Deuteranopia (Green-blind): The Medium (green) cone cells are missing entirely. Green and red appear as similar brownish-yellow shades. Traffic light green looks yellowish, and red appears a dark khaki. A form called Deuteranomaly (reduced green sensitivity, rather than complete absence) is even more common.
Protanopia (Red-blind): The Long (red) cone cells are missing. Red appears dark brown or charcoal, and orange/yellow/green all merge into a single yellowish tone. Red error states become nearly invisible to protanopic users.
Blue-Yellow Deficiencies (Rare)
Tritanopia (Blue-blind): The Short (blue) cone cells are missing. Blue appears greenish, and yellow appears violet or pale gray. This is significantly rarer than red-green deficiencies, affecting less than 0.01% of people.
Complete Color Blindness (Very Rare)
Achromatopsia (Monochromacy): All three cone types are non-functional. The user sees the world entirely in shades of black, white, and gray, with extreme light sensitivity. This affects approximately 1 in 30,000 people.
How Color Blindness Simulations Work: LMS Conversion
To simulate these conditions digitally, the tool cannot simply swap colors arbitrarily. It must mathematically transform colors based on how human photoreceptors respond to light.
Most simulators use the Brettel, Viénot, and Mollon algorithm (1997), which works in the LMS color space — a representation of light absorption by Long, Medium, and Short wavelength cone cells.
The Transformation Process
Step 1 — sRGB to Linear RGB: Remove the gamma correction of the sRGB input to make channel values linear.
Step 2 — RGB to LMS: Multiply the linearised RGB vector by the Hunt-Pointer-Estévez transformation matrix to determine how strongly each cone type is stimulated:
$$\begin{bmatrix} L \ M \ S \end{bmatrix} = \begin{bmatrix} 0.17886 & 0.71517 & 0.10600 \ 0.03446 & 0.73316 & 0.23238 \ 0.02266 & 0.27212 & 0.70522 \end{bmatrix} \times \begin{bmatrix} R \ G \ B \end{bmatrix}$$
Step 3 — Dichromatic Projection: For Deuteranopia, the $M$ channel is replaced by a value estimated from the remaining $L$ and $S$ channels, simulating what a person without green cones would perceive. For Protanopia, the $L$ channel is replaced similarly.
Step 4 — LMS Back to RGB: The adjusted LMS values are converted back through the inverse matrix, then gamma-corrected for standard sRGB display output.
UX Design Rules for Color Accessibility
Simulating color blindness identifies problems. These rules prevent them from happening in the first place:
Never Rely on Color as the Only Differentiator
Always pair color indicators with secondary cues: text labels, icons, shapes, or border styles.
<!-- Inaccessible: color-only feedback -->
<span class="dot red"></span> Error
<!-- Accessible: color + icon + text label -->
<svg aria-hidden="true" class="icon-error">...</svg>
<span class="sr-only">Error: </span>
<span>Invalid email address</span>
Use Patterns in Data Visualizations
Charts and graphs that use only color to differentiate series are inaccessible to color-blind users. Add contrasting fill patterns (diagonal stripes, dots, crosshatches) in addition to different colors. Consider also including value labels directly on the chart elements.
Underline Body Text Links
Standard body text links rely on a color change to distinguish them from surrounding text. For red-green color-blind users, a blue link may not be distinguishable from dark body text. Always include text-decoration: underline on inline links.
Use Sufficient Contrast Ratios
A contrast ratio that passes WCAG AA for sighted users does not automatically mean it is distinguishable for color-blind users. Test contrast after applying a color blindness simulation to ensure critical UI elements remain visible.
Avoid Red-Green Combinations for Status Indicators
Red-green is the single most dangerous combination in UI design for color blind users — and also the most common (error red, success green). Always augment these with icons or labels.
Privacy Note
Auditing UI designs and screenshots for accessibility often involves proprietary or unreleased design work. FluxToolkit performs all color blindness simulations entirely client-side using JavaScript Canvas API processing. Your uploaded images, screenshots, and mockups are never sent to our servers. Your design files stay secure on your device throughout the entire simulation process.
Frequently Asked Questions
What is the most common form of color blindness?
Deuteranomaly (reduced green sensitivity) and Deuteranopia (complete green-blindness) together are the most common forms, affecting around 5–6% of males. Combined red-green deficiencies affect approximately 8% of men globally.
Can color blindness be cured or corrected?
There is no cure for inherited color blindness. Specialty optical filters (like EnChroma glasses) can enhance contrast between certain hues for some users in some conditions, but they do not restore normal color vision.
What is Achromatopsia?
Achromatopsia is a rare hereditary condition where all cone cells are non-functional. Affected individuals see only in shades of black, white, and gray, and also have extreme sensitivity to light (photophobia). It affects roughly 1 in 30,000 people.
Is the simulator accurate?
The Brettel et al. (1997) algorithm used here is the scientific standard for digital simulation. It is widely used in research, professional design tools, and accessibility checkers. The simulation is mathematically accurate, though individual color perception varies across people even within the same deficiency type.
How do I design accessible forms for color-blind users?
Never use only a colored border (red vs. green) to indicate valid vs. invalid fields. Add an icon (warning symbol for errors, checkmark for success) and a descriptive text message. Ensure form labels are always visible, not replaced by placeholder text.
Does the simulator work on high-resolution screenshots?
Yes. All pixel processing happens locally in the Canvas API, so there are no server-side file size or resolution limits. Processing speed depends on your device's CPU and available memory.
Simulate Color Blindness Free — No Sign-Up Required
Test your designs against four types of color vision deficiency instantly. Free, private, no account needed.
Related Articles
- Color Contrast Checker: WCAG AA/AAA Compliance — Verify text readability for low-vision and color-blind users.
- Image Color Picker: Extract Colors from Photos — Pull exact color codes directly from design assets.
- CSS Color Converter: HEX, RGB, HSL & OKLCH — Convert your accessible color choices into any format.