Color Blindness Simulator

What is a color blindness simulator?

A color blindness simulator shows you how your colors and images would look to someone with a color vision deficiency (CVD). You feed it a palette or an image; it returns versions transformed to approximate what people with different types of color blindness actually perceive. Put your original next to the simulations and the problems jump out: the two chart series that turn into the same color, the red error text that fades into its green-tinted panel, the "available / sold out" badges that become identical.

The tool above works two ways. In Colors mode you enter up to six colors and see each one rendered under all eight CVD types in a side-by-side grid. In Image mode you drop in a screenshot, UI mockup or photo and get a gallery of simulations next to the original. Everything is computed in your browser, so it's instant and private.

How to use it

1. Pick a mode. Use Colors mode to test a palette, or Image mode to test a whole design or photo.
2. Colors mode: add your colors with the picker or by typing hex codes (up to six). The grid shows each color under Original plus all eight deficiency types. If two swatches in the same row look identical, those colors collide for that audience.
3. Image mode: drop in or choose an image. You'll get the original alongside eight simulations. Scan for detail that vanishes.
4. Copy what you need. In Colors mode, click any swatch to copy its hex value — including the simulated ones.

Images are processed locally on a canvas, so nothing is uploaded and the tool keeps working offline once the page has loaded.

The types of color blindness and how common they are

Color vision relies on three types of cone cells in the retina, sensitive to long (red), medium (green) and short (blue) wavelengths. CVD happens when one cone type is missing or shifted.

• Protanopia / Protanomaly — the red cone is absent (protanopia) or weakened (protanomaly). Reds look darker and can be confused with greens and browns.
• Deuteranopia / Deuteranomaly — the green cone is absent or weakened. Deuteranomaly is the single most common form of color blindness, affecting roughly 5% of men.
• Tritanopia / Tritanomaly — the blue cone is absent or weakened. Much rarer; blues and yellows become hard to tell apart.
• Achromatopsia / Achromatomaly — total or partial absence of color vision, so the world is seen largely or entirely in shades of gray. Very rare.

Taken together, color vision deficiency affects about 1 in 12 men (8%) and 1 in 200 women — the imbalance is because the most common types are linked to the X chromosome. In practical terms, if your product has a thousand daily users, dozens of them likely don't see color the way you do.

Why designers must check

Color is one of the easiest things to get wrong for accessibility because it's invisible to the person who can see it. A red/green pass-fail indicator looks perfectly clear to a designer with typical vision and completely ambiguous to a viewer with deuteranomaly. Common failure points include:

• Status and state: red/green for error/success, "online/offline" dots, traffic-light dashboards.
• Data visualization: line charts and pie charts that rely only on color to separate series.
• Form validation: fields outlined in red with no icon or message.
• Links: colored link text with no underline, indistinguishable from body copy.
• Maps and heatmaps: color-only legends.

These aren't edge cases — they're some of the most frequent patterns in software, which is exactly why checking matters. Accessibility guidelines (WCAG) require that color is never the only way information is conveyed.

How the simulation works

Under the hood, color blindness simulation is a math transform on each pixel. The cleanest way to think about it uses the LMS color space — a model based directly on the response of the three cone types (Long, Medium, Short). The process is:

1. Convert the color from RGB into LMS (cone responses).
2. Simulate the deficiency by collapsing or attenuating the affected cone's contribution — for protanopia, the long-wavelength (red) response is reconstructed from the remaining cones; for an anomaly, it's partially shifted rather than removed.
3. Convert back to RGB for display.

In practice these steps combine into a single 3×3 matrix per deficiency type, which is what this tool applies to every color and every pixel. The milder -omaly variants are modeled by blending the full-deficiency result partway back toward the original, reflecting that the cone is weakened rather than missing. Achromatopsia maps each pixel to its luminance, producing grayscale. Because it's just matrix arithmetic, the simulation is fast enough to run live in the browser on a canvas.

Tips for accessible color choices

Simulating is the diagnosis; these are the fixes.

• Never rely on color alone. Pair it with text, icons, shapes or patterns. A red "✕ Error" beats a red dot; a dashed line beats a second hue on a chart.
• Prefer color combinations that survive CVD. Blue and orange remain distinguishable for the most common (red/green) deficiencies far better than red and green do — our Color Palette Generator helps you build a scheme around pairings like these.
• Add redundant encoding to charts. Use direct labels, varied line styles, or distinct markers so a series is identifiable without its color.
• Check contrast, not just hue. Two colors that differ mainly in hue can be near-identical in lightness; a color-blind viewer then sees almost no difference. Verify foreground/background pairs meet the 4.5:1 ratio for normal text.
• Test the real thing. Run your actual screens through Image mode, not just isolated swatches — context (text on color, small indicators) is where problems hide.

After simulating here, confirm the lightness side of the equation with our Color Contrast Checker so your colors pass on both fronts.

Private by design

Plenty of accessibility tools ask you to upload an image to a server. This one doesn't: every simulation, for both colors and images, is computed locally with JavaScript and the Canvas API. Your screenshots, mockups and unreleased designs never leave your machine, there's nothing to sign up for, and there's no usage limit. Test as many palettes and images as you like — privately, instantly and for free.