How to use the color blindness simulator
- Choose a palette or an image. Paste your brand or chart colors as hex codes, or upload a design, a chart or a screenshot of a page.
- Compare the views. The simulator shows your colors as they appear with each of four types of color blindness, side by side with normal color vision.
- Check the warnings. For a palette, every pair of colors that looks clearly different to you but close for a color-blind viewer is listed under the type that causes it. Those are the pairs to fix or to separate by something other than color.
The severity slider simulates milder forms. At 100% it shows dichromacy, where one type of cone does not work at all; lower values approximate the more common anomalous trichromacy, where a cone type works but responds to the wrong wavelengths.
The four types of color blindness simulated
| Type | What is affected | Colors that get confused |
|---|---|---|
| Protanopia (red-blind) | The long-wavelength (L, red) cones | Red and green, red and brown, purple and blue. Reds also look darker. |
| Deuteranopia (green-blind) | The medium-wavelength (M, green) cones | Red and green, green and brown, green and orange. Brightness is less affected. |
| Tritanopia (blue-blind) | The short-wavelength (S, blue) cones | Blue and green, yellow and pink or light gray, purple and red. |
| Achromatopsia | All cone function | Every hue. Only light and dark remain, as in a grayscale image. |
Red-green color vision deficiency, the protan and deutan types together, is by far the most common: a 2012 review of prevalence studies put it at about 8% of men and 0.4% of women of European descent, with lower rates in most other populations. Tritan types are rare, and complete achromatopsia affects roughly 1 in 30,000 people. In a room of 50 men, odds are that a few of them do not see your red and green as two different colors.
What to do when colors clash
- Do not rely on color alone. WCAG 2.2 success criterion 1.4.1 asks that color is never the only way to convey information. Add labels, icons, patterns or position: a red error state also gets an icon and a message, a chart line also gets a label at its end.
- Separate by lightness. Two colors with very different lightness stay distinct for every viewer, including in grayscale. The achromatopsia view is a quick test: if two colors look the same gray, change the lightness of one.
- Avoid the classic pairs. Red with green, green with brown, blue with purple and light green with yellow cause most of the problems. Blue with orange is a safer pair for two-series charts.
- Check text contrast separately. Telling colors apart and reading text on a background are two different tests. Use the color contrast checker for text.
A simulation is a model of the average dichromat, not what every person sees. Color vision varies, and the only reliable test of a design is feedback from color-blind users. Use the simulator to catch the obvious problems early.
How the simulation works
Each color is converted from sRGB to linear light, multiplied by a 3 × 3 matrix that models the missing or shifted cone response, and converted back. The matrices for protanopia, deuteranopia and tritanopia are the ones published by Machado, Oliveira and Fernandes in 2009, a physiologically based model that is widely used in research and accessibility tools. Achromatopsia is simulated with the relative luminance weights of the sRGB standard, the same weights WCAG uses to compute contrast.
For the palette warnings, the simulator measures the difference between every pair of colors with the CIEDE2000 formula, before and after simulation. A pair is flagged when it is clearly different in normal vision (a difference of 10 or more) but falls under 10 in the simulated view. The value 10 is this tool's choice: small enough to flag only real clashes, large enough that close shades in a chart are caught.
Methodology and limits
- Model
- Machado, Oliveira and Fernandes (2009) matrices for severity 1.0, applied in linear RGB. Lower severities are a linear blend between the identity and the full matrix, an approximation of the paper's own per-severity matrices.
- Achromatopsia
- Gray with the relative luminance Y = 0.2126 R + 0.7152 G + 0.0722 B of linear sRGB, blended with the original at lower severities.
- Palette check
- CIEDE2000 color difference between every pair, flagged when the original difference is 10 or more and the simulated difference is under 10.
- Images
- Images are decoded by your browser and processed at up to 1,200 pixels on the longest side for the preview. Downloads use the same size. Colors are treated as sRGB.
- Limits
- The model describes typical dichromats; real color vision varies by person, by lighting and by screen. It does not simulate low vision, blur or blue-yellow anomalous trichromacy beyond the linear blend.
Sources
- Machado, G. M., Oliveira, M. M. and Fernandes, L. A. F. (2009). A physiologically-based model for simulation of color vision deficiency, IEEE Transactions on Visualization and Computer Graphics, 15(6), 1291 to 1298
- Birch, J. (2012). Worldwide prevalence of red-green color deficiency, Journal of the Optical Society of America A, 29(3), 313 to 320
- Achromatopsia, MedlinePlus Genetics, US National Library of Medicine
- Understanding Success Criterion 1.4.1: Use of Color, W3C Web Accessibility Initiative
- Relative luminance, Web Content Accessibility Guidelines (WCAG) 2.2, W3C