A fast, private color blindness simulator
Designing for everyone means ensuring your visual content is legible to people with color vision deficiencies (CVD). This color blindness simulator allows you to upload any image—whether it is a user interface mockup, a data visualization, or a photograph—and instantly see how it appears to someone who is colorblind.
Because the tool runs entirely in your web browser, your images are never uploaded to a server. You can safely test confidential UI designs, unreleased game assets, or private client work. The pixel manipulation happens directly on your device, providing instant feedback without the wait of a server upload.
The four types of color vision deficiency
Human color vision relies on three types of cone cells in the eye, which absorb red, green, and blue light. When one or more of these cones are missing or malfunctioning, it changes how colors are perceived. This tool simulates the four main categories at a severity level of 1.0 (complete absence of the affected cone):
Protanopia (Red-blind) People with protanopia lack red cones. Red colors appear much darker than normal, often shifting toward black or dark brown, while greens, yellows, and oranges all look like similar shades of yellow. Using a protanopia simulator is crucial when designing warning labels or error states, as bright red text may become nearly invisible against a dark background.
Deuteranopia (Green-blind) Deuteranopia is the most common form of color blindness, caused by missing green cones. It is very similar to protanopia in that it makes it incredibly difficult to distinguish between reds, greens, browns, and oranges. Generating a deuteranopia test image is one of the most important steps in evaluating a design, especially for things like traffic light systems or financial charts showing profit and loss.
Tritanopia (Blue-blind) Tritanopia is a much rarer condition where the blue cones are missing. People with tritanopia confuse blues with greens, and yellows with violets or pinks. The world appears largely in shades of red, cyan, and pink.
Achromatopsia (Monochromacy) Achromatopsia is total color blindness. People with this condition see the world entirely in grayscale. While rare, testing for achromatopsia is the ultimate accessibility color check. If your design works in pure grayscale, it relies on contrast and shape rather than hue, meaning it will be accessible to almost everyone.
When to use an accessibility color check
Relying on color alone to convey meaning is a common design pitfall. Running your assets through a colorblind simulator helps you catch these issues before they reach your users.
Data visualization and charts. Line graphs and pie charts often use a legend with different colored squares. If you use red and green to differentiate two lines, they may look identical to someone with deuteranopia. Testing your charts helps you realize when to add patterns, varying line weights, or direct labels.
User interface and web design. Error messages are traditionally red, and success messages are green. If a form field turns red to indicate a mistake but offers no accompanying icon or text explanation, a colorblind user might not realize an error occurred. You can use this tool alongside a Color Contrast Checker to ensure text remains readable and UI states are clear.
Game design. Video games frequently use color to distinguish friend from foe, or to highlight interactive items. Simulating your game screenshots ensures that crucial gameplay elements don't blend into the background for players with CVD.
Brand identities. When developing a new brand, it is helpful to see how the logo and marketing materials hold up. If you need to tweak your brand colors to improve distinction, try using a Color Palette Generator to build a more accessible foundation, or an Image Color Picker to sample and adjust specific problematic hues from your current assets.
How the colorblind simulator processes images
This tool doesn't just apply a generic color filter. It uses the scientifically validated transformation matrices developed by Machado, Oliveira, and Fernandes (2009).
To achieve an accurate simulation, the tool first converts the standard sRGB pixels of your image into a linear RGB color space. This step is critical because standard digital images use a non-linear gamma curve to store color data efficiently. Applying color blindness math directly to non-linear pixels results in inaccurate, overly dark simulations. By converting to linear light, applying the Machado matrices, and converting back to sRGB, the tool accurately mimics the physics of light hitting the human eye.
Because this pixel-by-pixel calculation is computationally intensive, the tool automatically scales down very large images (capping the longest edge at 1200 pixels). This ensures the browser can process the math and render the four simulations instantly without draining your device's memory or freezing the page.