Color Blindness Simulator for Images and Palettes

Check images and palettes for color blindness

This simulator shows how an image or a set of colors may look to someone with a color vision deficiency. Upload a photo, screenshot, chart or mockup and compare it with seven simulations, or paste up to six hex codes and see the palette for each type. It runs in your browser, so your image never leaves your device.

How to use the simulator

Choose Image or Palette at the top of the tool. Image mode starts with a demo photo.
In Image mode, click Upload image, drop a file anywhere on the page, or paste a screenshot with Ctrl + V (⌘ + V on Mac).
Pick a type, such as Deuteranopia, to see it next to the original. Pick All types to see all seven at once, then click any tile to compare it with the original.
Click Download PNG to save the simulated image for the type you picked.
In Palette mode, paste up to six hex codes. Each row shows the palette for one type, and the note under it names any pair of colors that becomes hard to tell apart.

What each type means

Typical color vision uses three kinds of cone cells, tuned to long (red), medium (green) and short (blue) wavelengths. A name ending in -opia means one kind of cone is missing. A name ending in -anomaly means that cone works but its sensitivity is shifted, which causes milder confusion.

Protanopia and protanomaly affect the red cones. Reds look darker, and red, green, orange and brown can run together.
Deuteranopia and deuteranomaly affect the green cones. Red and green get confused in much the same way, but reds keep their brightness.
Tritanopia and tritanomaly affect the blue cones. Blue can look like green, and yellow can look like violet.
Achromatopsia means the cones don't work, or barely work, so only light and dark remain. The simulation shows it as grayscale.

Red-green types are by far the most common. About 1 in 12 men and 1 in 200 women of Northern European descent have one. Blue-yellow types and achromatopsia are rare.

What a simulation can and can't show

Each type uses one fixed color matrix, the same set as the Blindness view in the color palette generator. It is an approximation that shows which colors are likely to merge, not exactly how any one person sees. Fix what you find by adding labels, icons or patterns so color isn't the only cue, and give important colors a clear difference in lightness. For text, check each pair in the color contrast checker.

To test the colors in a design, pick them with the image color picker or pull the main ones from a photo with color palette from image, then paste the hex codes into Palette mode. If two colors merge, the color wheel helps you find a replacement with a different hue and lightness.

Color blindness simulator FAQ

What are the types of color blindness?

The main types are protanopia and protanomaly (red cones), deuteranopia and deuteranomaly (green cones), tritanopia and tritanomaly (blue cones), and achromatopsia, where almost no color is seen. The -opia types mean a cone type is missing, and the -anomaly types are milder. Red-green types are by far the most common.

How accurate is a color blindness simulator?

It is close enough to catch problems, but it is not a diagnosis or an exact picture of anyone's vision. Each type here uses one fixed matrix at a single strength, while real color vision deficiency ranges from mild to strong. Screens and lighting shift colors too, so test with real users when it matters.

Which colors are hard for colorblind people to tell apart?

With red-green types, red, green, orange and brown can look alike, and purple can look like blue. With blue-yellow types, blue can look like green and yellow like violet. Colors with similar lightness are the riskiest for every type, which is why a clear difference between light and dark helps.

How do I make a design colorblind friendly?

Don't use color as the only way to show meaning. WCAG success criterion 1.4.1, Use of Color, asks for a second cue such as a text label, an icon, a pattern or an underline on links. Give key colors different lightness so they separate in grayscale, then check charts, status colors and maps here.

Is my image uploaded to a server?

No. The simulator reads your image in the browser and runs every calculation on your device, so nothing is sent anywhere. You can safely test unreleased designs and private screenshots. The PNG you download is also created in your browser, from the simulated pixels you see on screen.