Color Blindness Simulator
See how a color palette looks with protanopia, deuteranopia, tritanopia and achromatopsia, and find colors that become hard to tell apart. Runs entirely in your browser. Nothing is sent to any server.
One color per line, in any format. Up to 12 colors.
What is a color blindness simulator?
Around 8% of men and 0.5% of women have some form of color vision deficiency, most often a reduced ability to tell red from green. A simulator shows how a set of colors appears to them, so you can see whether a chart legend, a status badge or a map still works. This tool transforms each color with the Machado, Oliveira and Fernandes (2009) model for protanopia, deuteranopia and tritanopia, converts it to grayscale for achromatopsia, and flags pairs of colors whose difference drops below a ΔE of 10, the point where they become hard to tell apart.
Examples
The same simulation in code, as a reusable SVG filter, and built into the browser:
// Machado et al. 2009, deuteranopia, on linear RGB
const M = [[0.367322, 0.860646, -0.227968],
[0.280085, 0.672501, 0.047413],
[-0.01182, 0.04294, 0.968881]];
const sim = M.map((row) => row[0] * r + row[1] * g + row[2] * b);import numpy as np
M = np.array([[0.367322, 0.860646, -0.227968],
[0.280085, 0.672501, 0.047413],
[-0.01182, 0.04294, 0.968881]])
simulated = linear_rgb @ M.T<filter id="deuteranopia">
<feColorMatrix type="matrix" values="0.367 0.861 -0.228 0 0
0.280 0.673 0.047 0 0 -0.012 0.043 0.969 0 0 0 0 0 1 0" />
</filter>/* preview a whole page through the SVG filter above */
html { filter: url(#deuteranopia); }Use Cases
Checking chart and map palettes
Make sure every series in a chart or every category on a map stays distinguishable, especially the red and green pairs that fail most often.
Status colors in interfaces
Success, warning and error states often rely on green, yellow and red alone. See whether they collapse and add icons or labels where they do.
Reviewing a brand palette
Test a set of brand colors before they're used across a product, so accessibility issues are caught once instead of on every screen.
Explaining accessibility to a team
Show designers and stakeholders what a palette actually looks like to colorblind users, which is more convincing than a guideline.