Color Blindness Simulator
Pick a color and instantly see how it appears to people with the main types of color vision deficiency. The simulator applies a standard color matrix for protanopia, deuteranopia, and tritanopia, plus a grayscale view for total color blindness, all live in your browser.
How to simulate color blindness
- Pick a color with the swatch picker or type a HEX value like #FF6600.
- Compare the original against the protanopia, deuteranopia, tritanopia, and achromatopsia swatches.
- Copy any simulated HEX value to test your palette or check that key colors stay distinguishable.
Examples
Pure red under protanopia
#FF0000
#918E00 (red shifts toward a dull yellow-green)
Any color under achromatopsia
#3B82F6
#7A7A7A (color collapses to a neutral gray)
Frequently asked questions
What types of color blindness does this simulate?
Four. Protanopia (missing red cones) and deuteranopia (missing green cones) are the common red-green types. Tritanopia is the rare blue-yellow type. Achromatopsia is total color blindness, shown as grayscale.
How accurate is the simulation?
It uses well-known linear color matrices that approximate each deficiency, the same approach used by browser accessibility tools. It is a useful approximation for design checks, not a medical diagnosis, and real color vision varies from person to person.
What is the difference between protanopia and deuteranopia?
Both are red-green color blindness. Protanopia comes from missing or non-working red (L) cones, so reds look darker and dimmer. Deuteranopia comes from missing or non-working green (M) cones. The two look similar but shift colors slightly differently.
Why should I check my colors for color blindness?
Around 1 in 12 men and 1 in 200 women have some color vision deficiency. If you rely on color alone to show status, charts, or links, those users may not tell the colors apart. Simulating helps you add contrast or labels where it matters.
Does this tool send my colors to a server?
No. The color math runs entirely in your browser with JavaScript, so the colors you enter never leave your device. There is nothing to upload and nothing is stored.
Can I simulate color blindness from the API?
Yes. The API takes a HEX color and an optional type and returns the simulated HEX, or all four types when no type is given. The same engine powers both the page and the endpoint.
Related tools
Color Contrast Checker
Check the WCAG contrast ratio between two colors. See AA and AAA pass or fail for normal and large text, with a live preview. Runs in your browser.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from one base color. Pick a hex, copy each shade as hex, RGB or HSL.
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.