Accessibility
Color Blindness Simulator
Add up to six colors, or choose an image, to see how they may look with seven types of color vision deficiency. This simulation is an approximation intended for design testing and education.
This simulation is an approximation intended for design testing and education. It is not a medical diagnostic tool.
Private: Your image is processed locally in your browser and is not uploaded.
Choose an image to compare it with a simulated view.
Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.
How to use the Color Blindness Simulator
- Choose Colors or An image at the top of the tool.
- In Colors mode, enter up to six colors. Each one is shown as it appears with normal vision and with seven simulations.
- Read the list of pairs that may look alike, then fix them with a different lightness, a label, an icon or a pattern.
- In Image mode, choose a local file and a type of color vision. The original and simulated versions appear side by side, and you can download the simulated PNG.
Examples
Red and green
The default colors #D32F2F (red) and #388E3C (green) are easy to separate with normal vision. With deuteranopia they become the similar olive tones #8B7C28 and #867A42, and with achromatopsia they turn into nearly the same gray.
Charts and maps
A chart that separates its series by hue alone can fail for some viewers. Add direct labels, markers or dash patterns.
Screenshots and photos
Use Image mode to preview a screenshot of your interface. Check that status colors, links and selected states are still distinguishable.
Tips
- Deuteranomaly, the first option in image mode, is the most common type, so start there.
- Check your most important colors, such as errors, success messages and links, first.
Questions about the Color Blindness Simulator
What is color blindness?
Color vision deficiency means some color differences are harder to see. The red–green types (protanopia and deuteranopia, and their milder forms protanomaly and deuteranomaly) are the most common. Blue–yellow types (tritanopia and tritanomaly) are rarer, and complete color blindness (achromatopsia) is rare.
How accurate is the simulation?
It applies published transformation matrices (Machado, Oliveira and Fernandes, 2009) in linear RGB, and the anomaly types use half the strength of the full type. Real vision varies from person to person, so this simulation is an approximation intended for design testing and education.
Is this a medical test?
No. It cannot diagnose anything. An eye-care professional can test color vision properly.
Is my image uploaded?
No. Your image is processed locally in your browser and is not uploaded.
How do I make a design friendlier for color-blind users?
Never use color alone to carry meaning. Vary lightness as well as hue, add labels, icons or patterns, and check text contrast.
Related tools
Contrast Checker
Check text and background contrast against WCAG AA and AAA.
Image Color Extractor
Pull a color palette out of any image, privately in your browser.
Color Palette Generator
Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.
Color Picker
Pick any color and copy its HEX, RGB, HSL and CMYK values.