Color blindness simulator. Eight ways of seeing.
Color-pair tester
Check how a text / background pair holds up under every vision type, with the WCAG contrast ratio recalculated per mode (uses the severity slider above).
AA = ratio ≥ 4.5 (normal text) · AA-L = ratio ≥ 3 (large text ≥ 24px / 18.66px bold)
How the simulation works
Each vision type is approximated with an established 3×3 RGB color matrix (the widely used Colorjack / Machado-style daltonization matrices), applied pixel-by-pixel on a canvas. Around 8% of men and 0.5% of women have some form of color-vision deficiency, deuteranomaly (green-weak) is by far the most common. Everything runs locally; your image never touches a server. Free forever.
How to use the Color Blindness Simulator
This simulator shows how an image, or a text and background color pair, looks to people with eight kinds of color vision deficiency. It runs every pixel through a 3×3 color matrix for the chosen type and can blend that toward normal vision with a severity slider. Designers, developers and accessibility testers use it to catch charts, buttons and labels that only work when you can tell red from green.
Step by step
-
Load an image
Drop a JPG, PNG or WebP file on the card that says Drop an image here, or click it to browse. On a keyboard, focus the card and press Enter. The simulator panel opens with a preview of up to 900 pixels on the longest side.
-
Pick a vision type
Click a chip under Vision type. Deuteranopia is selected when the image loads, and Original shows the image unchanged. The line under the preview names the type and gives a short description of it.
-
Set the severity
Drag Severity between 0% and 100% in steps of 5%. The default of 100% is the full deficiency; lower values blend back toward normal vision, which suits the milder anomaly types. The setting also applies to the color pair tester.
-
Compare four views
Under View, switch from Single to 2×2 compare to see the original beside three types at once. Use the Compare slots (original + 3) menus to choose them; they start as Protanopia, Deuteranopia and Tritanopia.
-
Export the result
Choose a Format (PNG, JPG or WebP) and an Export size (Full resolution, or a cap of 1600, 1200 or 800 px). Burn mode labels into exports is on by default and writes the type and severity in a corner. Press Download simulated image for the current type, or Download 2×2 grid for the original plus the three slots in one file.
-
Test a color pair
In the Color-pair tester, set Text color and Background color with the picker or by typing a 3 or 6 digit hex code. It starts at #3F6B54 on #F5F0E8 and works without an image. Press Swap to flip them, Copy report for a plain text summary, or Download CSV for a spreadsheet.
Reading the result
- Each row of the tester shows a vision type, a sample of the simulated pair, the simulated hex codes and the contrast ratio, followed by two badges.
- AA passes when the ratio is 4.5:1 or more, the level for normal body text. AA-L passes at 3:1 or more, which applies to large text of 24px, or 18.66px in bold.
- With the default pair, Original reads 5.38:1 and passes both. Under Deuteranopia at 100% the colors become #504C5B on #F3F4EA and the ratio is 7.50:1, so this pair stays readable.
- The ratio measures lightness only, and simulation can raise it as well as lower it. Two colors can pass on contrast and still look alike, so use the image preview to judge colors that carry meaning, such as red and green status dots.
Tips and common mistakes
- The tool's own notes list deuteranomaly, the green weak type, as the most common at about 5% of men. Check it first, then the full red and green types.
- Try the anomaly types below 100% severity. They describe weakened rather than missing color vision, so a partial blend is closer to what most people with them see.
- JPG and WebP exports fill transparent areas with white. Choose PNG if you need to keep transparency.
- The on screen preview is scaled down to 900 pixels. For fine detail such as thin chart lines, export at Full resolution and look at the file.
- A hex box only updates the results when it holds a complete 3 or 6 digit code, so a half typed value leaves the last valid result on screen.
- The matrices are an approximation for design checks. Individual vision varies, so treat the output as a way to spot problems, not as a test of anyone's sight.
Privacy and limits
The image is decoded and recolored on a canvas in your own browser. Nothing is uploaded and nothing is saved, so reloading the page clears it. The report and CSV are built in the page, and Copy report places the text on your clipboard.
Everything a simulator should do.
- Simulate 8 vision types, protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia and achromatomaly, on any image.
- Adjust severity from 0% to 100% to show partial or full color-vision deficiency, ideal for the “-anomaly” types.
- Compare 4 views side by side in a 2×2 grid: the original plus any three vision modes of your choice.
- Test any color pair and see the WCAG contrast ratio recalculated for every deficiency type at once, with AA and AA-Large pass/fail flags.
- Download the simulated image or a labeled 2×2 comparison grid as PNG, JPG or WebP, at full resolution or capped at 1600 / 1200 / 800 px.
- Export a report, copy a plain-text summary or download a CSV of contrast ratios across all vision types for accessibility audits.
Frequently asked questions.
Is the Color Blindness Simulator free?
Is it private? Are my images uploaded anywhere?
Which vision types does it simulate?
How accurate is the simulation?
What do the AA and AA-L badges mean?
Does it work offline?
Published · Last updated .
