Color Blindness Simulator

Simulate how colors, designs, and uploaded images appear to people with color vision deficiencies: Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (monochromacy/grayscale).

Why Use This Tool?

• Accessibility (a11y) Design Auditing: Ensure UI buttons, charts, and alert badges remain distinguishable for color-blind users.
• Data Visualization Testing: Check if map keys and chart colors are accessible to all site visitors.
• WCAG Compliance: Test web design elements against W3C accessibility recommendations.

How to Use

1. Upload a design screenshot or select a sample image.
2. Toggle vision simulation filter (Deuteranopia, Protanopia, Tritanopia, Monochromacy).
3. Compare simulated output against original image.

Real Working Example

Input:

Filter: Deuteranopia (Red-Green Blindness) | Input: Chart with Red & Green bars

Output Result:

Simulated Render: Red and Green bars transformed into distinguishable Yellow/Brown shades

Important Technical Details & Features

• LMS Color Space Transformation Matrix: Applies mathematically accurate 3x3 matrix transformations to RGB pixels.
• Real-Time Canvas Filtering: Instant visual simulation updates on canvas element.
• 100% Local Browser Engine: Zero image uploads.

Related Editors, Design & Media Tools

• Color Contrast Checker: Check WCAG contrast ratios.
• Color Palette Generator: Generate color palettes.
• Color Converter: Convert color encodings.