Color Blindness Simulator
Protanopia
#cfced9
ΔE 29 — transforms completely
No red cone function. Reds appear darker and can be confused with green.
Protanomaly
#e9a5e5
ΔE 13.1 — shifts noticeably
Reduced red cone sensitivity — a milder version of protanopia.
Deuteranopia
#d6dfd3
ΔE 44.8 — transforms completely
No green cone function, the most common form of color blindness. Reds and greens are hard to distinguish.
Deuteranomaly
#ecb0e2
ΔE 16.2 — shifts noticeably
Reduced green cone sensitivity — a milder version of deuteranopia, and the single most common color vision deficiency.
Tritanopia
#fac4bf
ΔE 29.8 — transforms completely
No blue cone function, rare. Blues and yellows are hard to distinguish.
Tritanomaly
#fd9ed9
ΔE 12.9 — shifts noticeably
Reduced blue cone sensitivity — a milder, also rare, version of tritanopia.
Achromatopsia
#a4a4a4
ΔE 29.2 — transforms completely
Complete color blindness — vision in shades of gray only. Extremely rare.
Achromatomaly
#a4a4a4
ΔE 29.2 — transforms completely
Partial color blindness — colors appear washed out and desaturated.
See it in a real interface
An isolated swatch hides problems that show up in context. This mock interface uses your color and the comparison color from the section below — switch vision types to see the whole thing as that viewer would.
Status message
Would you notice this alert if the tint were the only cue?
Body text with a colored link inside it.
Chart series
Two series distinguished by color alone — exactly the pattern that fails.
Test an image or screenshot
Upload a screenshot of your website, a chart, a logo, or a poster and see the whole thing through a color vision deficiency. Everything runs in your browser — the image is never uploaded anywhere.
Drop an image here
PNG, JPG, WebP, SVG — anything your browser can display
Drag anywhere on the image to move the divider. Large images are scaled to 800px for speed.
Do two colors stay distinguishable?
The most common accessibility failure isn’t one bad color — it’s a pair that collapses together. Enter your two status, chart, or brand colors and see the perceptual difference (CIEDE2000) and contrast ratio under every vision type.
| Vision type | The pair, as seen | ΔE | Contrast | Verdict |
|---|---|---|---|---|
Verdicts use CIEDE2000 bands: below 2.3 is under the just-noticeable difference (effectively identical), below 10 is risky at a glance, above 10 reads as clearly different. Worst case for this pair: at ΔE . For text-on-background decisions, use the contrast checker — or the Delta E calculator for the full difference report.
Designing for color vision deficiency
Never rely on color alone
WCAG success criterion 1.4.1 ("Use of Color") requires that color is not the only visual means of conveying information. Pair every color-coded state with an icon, a label, a pattern, or a position difference.
Separate by lightness, not just hue
Lightness differences survive every type of color vision deficiency — even achromatopsia. If your two states differ clearly in lightness, they stay distinguishable for everyone.
Prefer the blue–orange axis for charts
Red–green distinctions collapse for the overwhelming majority of affected viewers, but blue–orange pairs survive protanopia and deuteranopia. Most modern chart libraries default to this axis for exactly this reason.
Test the dichromatic types, not just the mild ones
If a pair survives protanopia and deuteranopia (the strongest common forms), it will also survive the milder anomalous versions — the reverse is not true.
Check real interfaces, not lone swatches
Small elements like 2px chart lines and thin icons are harder to tell apart than large fills of the same colors. Screenshot your actual UI and run it through the image simulator above.
What color blindness actually is
Human color vision comes from three types of cone cells in the retina, tuned to long (L, “red”), medium (M, “green”), and short (S, “blue”) wavelengths. A color vision deficiency means one cone type is missing (the -opia forms simulated here) or has shifted sensitivity (the milder -omaly forms). The brain can only distinguish colors whose cone responses differ — so when one cone type drops out, every pair of colors that differed only in that cone’s signal collapses into a single perceived color. Those collapsed pairs form the “confusion lines” you can watch happening in the comparison table above.
Prevalence is strongly sex-linked for the red–green forms because the L and M cone genes sit on the X chromosome: population studies (mostly of people with Northern European ancestry) put red–green deficiency at roughly 8% of men and 0.5% of women, with deuteranomaly alone accounting for about 5% of men. Blue-based tritan deficiencies are far rarer — on the order of 1 in 10,000 — and affect both sexes equally, since the S cone gene is on chromosome 7. Complete achromatopsia is rarer still (about 1 in 30,000) and usually comes with light sensitivity and reduced visual acuity, which is why designing for it means relying on lightness and structure rather than any hue at all.
Color vision deficiency affects roughly 1 in 12 men and 1 in 200 women worldwide. If a design relies on red vs. green alone to convey meaning — a chart legend, a form validation state, a status indicator — a meaningful fraction of users may not be able to tell the states apart at all. Pairing color with a second signal fixes this regardless of which deficiency a viewer has.
Frequently asked questions
Deuteranomaly (reduced green sensitivity) is by far the most common, affecting roughly 5% of men. Full dichromatic types (deuteranopia, protanopia) and any blue-based deficiency (tritanopia, tritanomaly) are much rarer.
It uses the standard linear-RGB transformation matrices found in most color blindness simulators (based on Brettel, Vienot & Mollon's research). It's a solid approximation for design decisions, but individual color vision varies, and this is not a substitute for a clinical assessment.
Yes — take a screenshot of the page and drop it into the image simulator above. The simulation runs entirely in your browser, so the screenshot is never uploaded to any server. For interactive states like hovers and focus rings, screenshot each state separately.
Each cone type contributes one dimension of color difference. When a cone type is missing, any two colors whose signals differed only in that dimension produce the same response — they sit on the same “confusion line.” Red and certain greens do exactly this for protanopia and deuteranopia, which is why the comparison table can show a pair collapsing to ΔE near zero.
Somewhat. The simulation assumes standard sRGB, so an uncalibrated or wide-gamut display will shift the exact colors you see. The relationships it reveals — which pairs collapse and which survive — hold up well regardless, because they come from the cone physiology, not the screen.
No. WCAG success criterion 1.4.1 (“Use of Color”) explicitly requires another visual cue — an icon, label, pattern, or position. Color can reinforce meaning, but if removing every hue from your interface would make states ambiguous, the design needs a second signal.
Increase the lightness or saturation difference between them, or — more reliably — stop relying on color alone. Add an icon, label, pattern, or position difference so the distinction survives any color vision type.
Related tools
Contrast Checker
Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.
Try it → ColorsHEX to RGB Converter
Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.
Try it → GeneratorsPalette Generator
Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.
Try it →Ready to find your perfect palette?
Start from any color and let real color theory do the rest — or warm up with today's puzzle.