HH Color Lab
Blindness Simulator

See colors through other eyes.

Check how a color is perceived by people with different types of color blindness to create more accessible designs.

Blindness Simulator

Check how a color is perceived by people with different types of color blindness to create more accessible designs. Understanding color perception helps ensure your content is accessible to everyone.

Tip: red next to green is a classic problem. Try it, then try changing the colors until the verdict says they are easy to tell apart.

Why it matters

Impact

8% of men and 0.5% of women have some form of color vision deficiency.

Types

Red-green blindness is most common, affecting how reds and greens are perceived.

Design Better

Use contrast and patterns alongside color to convey information.

How to use this tool (step by step)

Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.

  1. Choose your two colors

    • Press the color square next to Color A and pick a color.
    • Do the same for Color B: this is the color you want to tell apart from A.
    • Or type HEX codes.

    Why we do this: Most real problems happen when two colors that must look different (for example, a good and a bad status) become the same for some people.

  2. Read each type

    • Look at the boxes: each shows A and B as seen with one type of color blindness.
    • Read the verdict under the boxes: Easy to tell apart, Hard, or Very hard.
    • Pay most attention to red-green types: they are the most common.

    Why we do this: Seeing the actual simulated colors makes the problem obvious without needing technical knowledge.

  3. Fix the problem

    • If the verdict is Hard or Very hard, change one of the colors.
    • Make them differ in lightness (one clearly darker), not only in hue.
    • Add a second clue such as an icon, label or pattern.

    Why we do this: Lightness differences survive every type of color blindness, and extra clues make your design work for everyone.

  4. Try a picture (optional)

    • Press Test a picture.
    • Choose a chart, map or screenshot.
    • Compare the simulated versions to the original.

    Why we do this: Charts and maps often use many colors together, and a picture test shows if the whole design still works.

Questions people ask

Quick answers.

Is this simulation exact?

It is a well-known scientific approximation (Machado et al., 2009). Real vision varies from person to person, so use it as a guide and not as a medical test.

What do protanopia, deuteranopia and tritanopia mean?

They are types of color blindness where one of the three kinds of color-sensing cells is missing: red (protan), green (deutan) or blue (tritan). The ending -anomaly means the cells work but are shifted, so the effect is milder.

What is achromatopsia?

A rare condition where there is no color vision at all and the world appears in shades of gray.

What is the simplest rule for accessible color?

Never rely on color alone. Use lightness differences, labels, icons or patterns as well.