👁️ Color Blindness Simulator
Upload an image to preview how it appears under common color vision deficiencies — protanopia, deuteranopia, tritanopia, and achromatopsia. Not a medical test. Processing runs locally in your browser.
Upload an image and preview how it looks under four common color vision deficiencies: protanopia, deuteranopia, tritanopia, and achromatopsia. The tool applies LMS-style 3×3 matrix transforms to every pixel using the Canvas API. No images are uploaded to any server — all processing runs in your browser.
What Is a Color Blindness Simulator?
This tool previews how an uploaded image may appear to people with common color vision deficiencies. You provide an image file (drag-and-drop or file picker), select a simulation type, and the tool applies an LMS-style 3×3 matrix transformation to every pixel — rendering the result on a Canvas element for side-by-side comparison with the original. The four simulation types are: protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and achromatopsia (total color blindness). All processing runs locally in your browser using the Canvas API and FileReader — no images are uploaded to any server. This is an accessibility preview tool, not a medical diagnostic test.
Supported Simulation Types
| Type | Cone Affected | Design Impact |
|---|---|---|
| Protanopia | L-cones (red) missing | Reds appear darker and greenish. Orange, yellow, and green become hard to distinguish. Red text on dark backgrounds can become nearly invisible. |
| Deuteranopia | M-cones (green) missing | Most common form. Greens and reds appear similar. Brown, orange, red, and green can blend into a single muddy hue. Green "success" indicators on dashboards lose meaning. |
| Tritanopia | S-cones (blue) missing | Rare. Blues appear greenish, yellows shift to pink or light gray. Blue hyperlinks on white backgrounds can become difficult to identify. |
| Achromatopsia | All cones non-functional | Extremely rare (~1 in 30,000). Complete grayscale vision. Any design relying on color alone to convey meaning becomes inaccessible. |
Note: These are approximations based on LMS color space transforms. Individual perception varies. This tool simulates full dichromacy — it does not model the milder anomalous trichromacy variants (protanomaly, deuteranomaly).
Click or drag & drop an image here
Original
Simulated
When to Use This Simulator
Designers and developers use this tool to identify color-reliance problems in visual content before they reach real users:
- UI screenshots and mockups — check whether buttons, links, and interactive elements remain distinguishable when color perception changes.
- Charts and dashboards — verify that data series, heatmaps, and status indicators do not rely on color as the only differentiator.
- Error, success, and warning states — confirm that critical messages use icons, text labels, or patterns — not color alone.
- Marketing images and infographics — preview whether call-to-action elements and data visualizations remain legible.
- Accessibility pre-checks — catch obvious color-accessibility issues before investing time in full WCAG audits or user testing.
When NOT to rely on this tool: It does not replace testing with real users who have color vision deficiencies. It does not calculate WCAG contrast ratios. It is not a medical test — it cannot tell you whether you or anyone else has color blindness.
How It Works
The simulator follows a five-step pipeline, all running locally in your browser:
- Image upload. You select an image file via the file picker or drag-and-drop. The browser reads it using
FileReader.readAsDataURL()— no data leaves your device. - Canvas rendering. The original image is drawn onto an HTML5 Canvas at a maximum size of 500×400 pixels, maintaining the original aspect ratio.
- Pixel extraction.
CanvasRenderingContext2D.getImageData()extracts every pixel's RGBA values into a typed array for processing. - LMS matrix transform. A 3×3 linear transformation matrix — specific to the selected simulation type — is applied to each pixel's red, green, and blue channels. The matrices approximate how missing or non-functional cone types shift color perception in the LMS (long, medium, short wavelength) color space.
- Result rendering. The transformed pixel data is written back to the Canvas via
putImageData(), and a side-by-side comparison (original vs. simulated) is displayed along with a description of the selected condition.
How to Use the Color Blindness Simulator
- Upload an image or drag and drop it onto the upload area.
- Select a simulation type: Protanopia, Deuteranopia, Tritanopia, or Achromatopsia.
- The tool applies an LMS-style matrix transform and renders a side-by-side comparison (original vs. simulated) using the Canvas API.
- Use the preview to identify color-reliance issues in your design — not as a substitute for real-user accessibility testing.
Limitations
- Not a medical test. This tool simulates — it does not diagnose color blindness. A diagnosis requires evaluation by a qualified eye-care professional using standardized clinical tests.
- Approximate simulation. The LMS matrix transforms are mathematical approximations. Actual color perception varies between individuals, even among those with the same type of color vision deficiency. Monitor calibration, ambient lighting, and browser rendering also affect the preview.
- No WCAG contrast calculation. The tool does not compute contrast ratios or verify compliance with WCAG 2.x success criteria. For accessibility audits, pair this simulator with a dedicated contrast checker.
- No anomalous trichromacy. Only full dichromacy (missing cone) and achromatopsia are simulated. Milder forms such as protanomaly and deuteranomaly (shifted cone sensitivity) are not modeled.
- No live URL input. You must provide a local image file. The tool cannot fetch images from URLs or take screenshots of live web pages.
- No export or download. The simulated result is viewable on-screen only. There is no PNG, JPEG, or other export option.
- Does not replace real-user testing. Actual users with color vision deficiencies remain the most reliable source of accessibility feedback.
Privacy
Image processing runs entirely in your browser. When you upload an image, it is read via FileReader.readAsDataURL() — the file bytes never leave your device. The Canvas API processes pixels in memory, and no image data is transmitted to any external server, API, or cloud service.
ToolStand may record anonymized page-view and tool-interaction analytics events (such as which simulation mode was selected), but the actual image content and pixel data are never collected, logged, or transmitted.
Frequently Asked Questions
Is this a medical color blindness test?
No. This is an accessibility preview tool for designers and developers. It applies LMS matrix transforms to simulate how images may look to people with certain types of color vision deficiency. It does not diagnose, screen for, or evaluate color blindness in individuals. If you have concerns about your color vision, consult an eye-care professional.
Which color vision deficiencies can it simulate?
The tool supports four simulation types: Protanopia (red-blind, L-cones missing), Deuteranopia (green-blind, M-cones missing — the most common form), Tritanopia (blue-blind, S-cones missing — rare), and Achromatopsia (total color blindness, no cone function — extremely rare). Each applies a different 3×3 matrix transform to approximate how colors shift under that condition.
How does the simulator process an uploaded image?
Images are read locally using the FileReader API, rendered onto an HTML5 Canvas, and processed pixel-by-pixel with a 3×3 LMS color-space matrix. The transformed result is displayed as a side-by-side comparison with the original. No image data is sent to any server.
Does this guarantee WCAG accessibility?
No. This tool helps identify potential color-reliance problems, but it does not calculate contrast ratios, check focus indicators, or verify compliance with any WCAG 2.x success criterion. Use it as a quick visual pre-check, then follow up with a dedicated contrast checker and formal accessibility audit.
Is my uploaded image sent to a server?
No. All image processing happens in your browser using the Canvas API and FileReader. The image file, pixel data, and simulation results remain entirely on your device. ToolStand analytics record which modes are used — not the image content.
Can this replace testing with real users?
No. Simulation can highlight obvious color-accessibility issues but cannot capture the full range of human perception, adaptation strategies, or assistive-technology interactions. Real users with color vision deficiencies provide uniquely valuable feedback that software simulation cannot replicate.