This tool lets you visualize how your CSS gradients appear to people with various types of color vision deficiency (CVD). It simulates four types of color blindness—Protanopia, Deuteranopia, Tritanopia, and Achromatopsia—so you can ensure your design remains effective and accessible to all users.

Our simulations use established LMS color space transformation matrices based on the Brettel-Viénot-Mollon method, widely cited in vision science. While no digital simulation can perfectly replicate the lived experience of color blindness, these matrices provide a scientifically grounded approximation trusted by accessibility professionals.

Protanopia (red-blind) affects the L-cones, making reds appear darker and reducing sensitivity to long-wavelength light. Deuteranopia (green-blind) affects the M-cones and is the most common form—both are types of red-green color blindness. Together they affect approximately 8% of males and 0.5% of females.

Gradients often rely on subtle hue transitions to convey meaning, mood, or branding. A beautiful sunset gradient may become a flat, indistinguishable band for someone with Protanopia. Testing ensures your visual hierarchy and emotional impact survive across all visual abilities.

Use high luminance contrast between color stops, avoid relying solely on red-green transitions for meaning, and consider adding texture or pattern overlays. Always pair color with another visual cue. Test your gradients with this simulator across all four CVD types before finalizing your design.