Jernej LeticaPhotography Tools & Stories
Color Tools

Color Blindness Simulator for Images

Upload an image or enter hex colors to see them as people with red-green, blue-yellow or no color vision see them. Runs in your browser.

Built and written by Jernej Letica

Local browser processing · No upload · No account required

Image
Hex colors

    How to simulate color blindness on an image

    1. Choose an image. It is opened in your browser and never uploaded.
    2. Read the grid: the original and seven versions, from protanopia to achromatopsia. Move the severity slider to change the three -anomaly types.
    3. Switch the view to one type to drag a before and after slider over the image. On a phone, drag it with a finger.
    4. Press Download PNG under any version to keep it. To check single colors, type their hex codes in the box below the image.

    My red bicycle at Metelkova

    I tried the page on my photo of the red bicycle at Metelkova in Ljubljana. The red frame has an average color of #bb2a3d. Under protanopia it becomes #56503d, a dark olive brown, and under deuteranopia #7a6f39. Tritanopia hardly touches it: #cd0633.

    That matches what I expected, but seeing it still surprised me. The bicycle stops being the loudest thing in the picture. If it were the one red button on a green page, a person with protanopia or deuteranopia might not find it.

    The types of color blindness

    Protanopia and deuteranopia are the red-green types. With protanopia the long-wavelength cones are missing, with deuteranopia the medium-wavelength ones, and reds and greens move towards the same yellow-brown. Tritanopia is the rare blue-yellow type, where blues look greener and yellows look pinker. Protanomaly, deuteranomaly and tritanomaly are the milder forms, in which the cones are present but respond at the wrong wavelengths. The slider sets how strong they are, from 0 % (normal vision) to 100 % (the same as the -opia). Achromatopsia is no color at all, only lightness.

    How the simulation works

    The page uses the matrices of Machado, Oliveira and Fernandes (2009). A pixel is first converted from sRGB to linear light, because the matrices describe light and not the gamma-encoded numbers in the file. It is multiplied by the 3 by 3 matrix of the chosen type and severity, and converted back to sRGB. Matrices exist in steps of 10 %, and the page blends the two nearest ones for a value in between. Achromatopsia is the luminance of the pixel, 0.2126 R + 0.7152 G + 0.0722 B in linear light. White and black stay unchanged in every type.

    It is a simulation for people with normal vision. It shows a typical case, and real color vision varies from person to person.

    Is my image color blind friendly?

    Look at the grid for places where two things you want to tell apart end up with the same color, such as a red line on a green chart or a red error next to a green success. For a short list of colors, enter their hex codes. The page then simulates each one and measures the distance between each pair with the CIEDE2000 formula. A distance under 10 after the simulation means the two colors are hard to tell apart for that type, and the page names the pair and the type. The most reliable fix is to also vary lightness or add a label, a shape or a pattern, so that color is not the only signal.

    Tips for better results

    • Check the three -opia types first. They are the strongest case; the -anomaly types are milder versions of the same shifts.
    • Look at lightness as well as hue. If two colors have the same grey in the achromatopsia version, add a label or a pattern.
    • Test charts, maps and status colors with the hex box. A pair that the page flags is worth changing.
    • A downloaded PNG has the simulated pixels at up to 4096 pixels on the long side.
    • Use the severity slider to see how much a mild form changes the picture.

    Privacy

    Your image never leaves your device. It is opened and simulated in your browser, and nothing is uploaded or stored. Hex codes you type stay in the page.

    Frequently asked questions

    How would a colorblind person see this image?

    Upload it and read the grid. Protanopia and deuteranopia shift reds and greens towards yellow-brown, tritanopia changes blues and yellows, and achromatopsia shows only lightness. Move the slider for milder forms.

    Can I upload an image to a color blindness simulator without it leaving my device?

    Yes. This page opens the file in your browser and simulates it there, so nothing is uploaded. Downloads are PNG files made on your own device.

    Is my image color blind friendly?

    Check whether things you need to tell apart still differ in the simulated versions. For a palette, enter the hex codes: pairs with a CIEDE2000 distance under 10 after simulation are listed as hard to tell apart.

    How does a color blindness simulator work with a hex code?

    The hex code is converted to linear RGB, multiplied by the matrix of each type and converted back. You get a simulated hex code for protanopia, deuteranopia, tritanopia, the three -anomaly types and achromatopsia.

    What is the difference between protanopia and protanomaly?

    Protanopia means the long-wavelength cones are missing. Protanomaly means they are present but shifted, so the effect is weaker. The same applies to deuteranopia and deuteranomaly, and tritanopia and tritanomaly.

    Related tools