Color Blindness Simulator
Preview how colors appear under different types of color blindness.
How to use the Color Blindness Simulator
Enter your values and pick a mode if the tool offers one.
Click calculate — results appear instantly, computed in your browser.
Copy the result or save the tool to your favorites.
Frequently asked questions
Approximate appearance under common color vision deficiencies.
Normal, plus protanopia, deuteranopia, and tritanopia approximations.
No — it is a design aid, not a diagnostic tool.
It helps ensure your color choices stay distinguishable for everyone.
Entirely in your browser.
About the Color Blindness Simulator
This tool previews how a colour appears to people with different types of colour vision deficiency. Pick a colour and see approximations of how it looks under the common forms of colour blindness, helping you design with accessibility in mind.
What colour vision deficiency is
Colour blindness, more accurately called colour vision deficiency, affects a significant share of the population, particularly men, of whom roughly one in twelve has some form. It rarely means seeing no colour at all; far more often it means certain colours are harder to tell apart. The most common types affect the perception of red and green, making those hues look more similar than they do to people with typical vision, while a rarer type affects blue and yellow.
Why this matters for design
If your design relies on colour alone to convey information, a portion of your audience may miss it entirely. A classic problem is a red and green status indicator: to someone with red-green deficiency, both may look the same muddy tone, making the distinction useless. Charts that distinguish data series only by colour, form fields that signal errors only in red, and maps coded purely by hue all risk excluding people. Designing with colour blindness in mind is both a courtesy and, increasingly, an accessibility requirement.
How to use the simulation
Choose a colour and the tool shows it as it appears under normal vision alongside approximations for the main deficiency types. By comparing a pair of colours you intend to use together, you can judge whether they remain distinguishable for everyone or whether they collapse into near-identical tones for some viewers. If two colours look the same in a simulation, they need more than colour to tell them apart.
Designing inclusively
The simulations here are approximations, useful for catching obvious problems rather than perfectly replicating any individual's vision. The reliable principle is never to rely on colour alone. Pair colour with labels, patterns, icons, or differing shapes so information survives regardless of how colour is perceived. Ensuring strong contrast between text and background helps everyone, including those with low vision.
Privacy and related tools
The simulation runs entirely in your browser and stores nothing. For converting and comparing colour values see the Color Code Converter and the HEX to RGB Converter. The preview updates instantly as you choose colours.