Color Blindness Simulator

How to use

1. 1Pick a color vision deficiency (deuteranomaly is the most common starting point, affecting about 5% of males).
2. 2Choose An image and drop a PNG, JPG, or WEBP up to 20 MB onto the page, or paste a hex or rgb() value into Or A single color.
3. 3Read the side-by-side preview. Spot text that becomes hard to read, chart series that collapse, and status colors that lose meaning.
4. 4Click Download simulated PNG to save the simulated image, or use Copy hex and Copy report on the single-color view to save the result.
5. 5Scroll to Preset palettes to see how common UI palettes hold up, and click any swatch to test that color one to one.

About this tool

Color Blindness Simulator shows how an image or a single color looks to viewers with the eight most commonly tested color vision deficiencies, all without leaving your browser. Drop a chart, dashboard screenshot, brand mockup, photograph, or status banner onto the page and a side-by-side preview renders the original next to a Brettel/Machado simulated copy. The simulation pipeline draws your file onto an offscreen canvas, pulls the pixel buffer out as ImageData, gamma-decodes each sRGB pixel back to linearized RGB, multiplies by the matrix for the chosen deficiency taken from Machado, Oliveira and Fernandes (2009), and gamma-encodes the result back to sRGB so the rendered image matches the published physiological model rather than the rough desaturation older tools produced. Eight deficiencies are supported: protanopia (no L cones, about 1% of males), protanomaly (reduced L cones, anomalous trichromacy), deuteranopia (no M cones, the most common dichromacy), deuteranomaly (reduced M cones, the most common color vision deficiency overall at roughly 5% of males), tritanopia (no S cones, rare and not sex-linked), tritanomaly (reduced S cones), achromatopsia (no functional cones, rendered as pure Rec. 709 luminance) and achromatomaly (severe desaturation with residual hue). For single colors a panel renders one card per deficiency with the simulated hex, rgb(), and a large swatch you can copy or screenshot, and a Copy report button packages the full nine-color comparison as plain text for a code review or accessibility audit. Four built-in preset palettes (the failing red/amber/green traffic light, a default chart-library palette, Bang Wong's color-blind safe palette, and a brand red/green pass/fail pairing) let you see at a glance which UI palettes collapse for which viewers, and clicking any swatch loads it into the single-color tester. Useful for designers picking chart palettes, product engineers verifying status banners and badges, accessibility leads running WCAG audits, content editors checking infographics, marketers reviewing brand colors, and anyone shipping a UI that needs to remain readable for the roughly 1 in 12 men and 1 in 200 women with a color vision deficiency. The whole pipeline runs locally on your device, so the screenshots and brand assets you check here never leave your browser.

Free to use. Works in your browser. No signup, no login.