Live Website Color Blindness Simulator – Enter URL

A Color Blindness Simulator is a tool that allows designers and developers to preview how a website appears to people with various types of color vision deficiency (CVD). It applies scientifically-informed color transformation matrices to simulate conditions like red-green color blindness (protanopia/deuteranopia), blue-yellow color blindness (tritanopia), and complete color blindness (achromatopsia). This helps ensure your website is accessible and usable for the approximately 1 in 12 men and 1 in 200 women worldwide who have some form of color blindness.

This tool loads the website you specify into an iframe and applies SVG feColorMatrix filters over the rendered content. These color matrices are based on peer-reviewed research on human cone cell responses and accurately simulate how colors are perceived by individuals with different types of color blindness. The simulation runs entirely in your browser — no data is sent to any server, and we do not capture or store any URLs you enter.

Many websites set HTTP headers like X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none' to prevent their content from being embedded in iframes on other domains. This is a security measure against clickjacking attacks. Popular sites like Google, Facebook, YouTube, and many others implement these restrictions. For testing such sites, consider using browser extensions or dedicated accessibility testing tools that can apply filters directly to the active tab. Local development servers (localhost) typically do not have these restrictions and work perfectly with this tool.

• Deuteranopia (Green-Blind): Missing M-cones (green). Most common type — affects ~6% of males. Red and green appear similar.
• Protanopia (Red-Blind): Missing L-cones (red). Affects ~2% of males. Reds appear dark or black.
• Tritanopia (Blue-Blind): Missing S-cones (blue). Very rare — affects ~0.01% of people. Blue and yellow confusion.
• Achromatopsia (Total Color Blindness): Complete absence of color vision — sees only shades of gray. Extremely rare (~1 in 30,000).
• Deuteranomaly (Green-Weak): M-cones are shifted. Most common form of color vision deficiency overall. Milder than deuteranopia.
• Protanomaly (Red-Weak): L-cones are shifted. Milder form of red color blindness.
• Tritanomaly (Blue-Weak): S-cones are shifted. Extremely rare mild blue-yellow deficiency.

The color matrices used in this tool are based on established color science research (Brettel, Viénot, & Mollon, 1997; Machado, Oliveira, & Fernandes, 2009). They provide a close approximation of how dichromats (complete absence of one cone type) perceive colors. For anomalous trichromats (color weakness), we use interpolated matrices at ~50% intensity, which provides a reasonable approximation. However, no simulation is 100% perfect — individual experiences of color blindness vary, and factors like monitor calibration, ambient lighting, and individual physiological differences affect real-world perception. Use this tool as a helpful guideline for accessibility testing, not as an exact replica of any individual's visual experience.

1. Check color contrast: Ensure text and interactive elements maintain sufficient contrast under all simulated conditions.
2. Don't rely solely on color: Verify that information conveyed through color (e.g., error states, charts, links) is also distinguishable via icons, patterns, text labels, or underlines.
3. Test critical flows: Simulate your checkout process, form validation, and navigation under deuteranopia and protanopia — the most common types.
4. Review data visualizations: Charts and graphs often use color to differentiate data series. Check if they remain readable under simulation.
5. Use the peek feature: Hold the "Hold: Original" button to quickly compare the original and simulated views side-by-side.

No. This tool operates entirely client-side in your browser. The URL you enter is used only to set the iframe's src attribute. No data is transmitted to any external server, and we do not log, store, or track any URLs or browsing activity. The website loaded in the iframe is subject to its own privacy policies, but the simulator itself performs no tracking.