This colour blindness simulator is meant to test a website's accessibility to colour blind people. Use the dropdown element to choose which colour blindness type you want to simulate, the small checkbox at the left shows the original colours for quick comparison.

Other services exist for this purpose, but either they only work on single images, are not free, or they are browser plugins, or I was just not impressed with the result.

This one uses an iframe on which SVG colour matrix filters are applied, so you don't lose any of the interactivity of the site you are checking, and it works with every element including rendered canvas, SVG, video, etc, even WebGL should work somewhat. Also, HTTPS works just as fine, as well as websites requiring a login, cookies, whatever (nothing even goes through this server). It even works for checking sites that are not accessible on the Internet, on your local network or just on your computer.

However, some sites like Flickr will not allow embedding into iframes. That is quite legitimate, and I can't do much about it.

Due to limitations of SVG filters, the simulations here are not exact, but they should be enough for evaluating the accessibility of web pages, graphics, etc. That is also why protanomaly, deuteranomaly (the most common type of colour blindness) and tritanomaly are not included, since they are basically less extreme versions of protanopia, deuteranopia and tritanopia.

I am using conversion matrices from a page which seems to have disappeared from the Internet today, here they are for reference, as well as visual examples of what the full colour spectrum gets reduced to for people affected by each deficiency :

0.56667 0.43333 0.00000
0.55833 0.44167 0.00000
0.00000 0.24167 0.75833
(example) (reference)
Protanopia (and the less severe protanomaly) affects about 2% of male population, where red sensitivity is either absent or reduced (and can be confused with green).
 0.4251  0.6934 -0.1147
 0.3417  0.5882  0.0692
-0.0105  0.0234  0.9870
(example) (reference)
Deuteranopia (and the less severe deuteranomaly) is the most common form of colour blindness; 1% of males have deuteranopia, and 6% have some form of deuteranomaly where green and red are difficult to distinguish.
0.95000 0.05000 0.00000
0.00000 0.83333 0.16700
0.00000 0.87500 0.12500
(example) (reference)
Tritanopia is the least common form (less than 1%) but affects females as well as males. Tritanomaly (where blue cones are present but anomalous) is very rare (less than 0.01%).
0.33333 0.33333 0.33333
0.33333 0.33333 0.33333
0.33333 0.33333 0.33333
(example) (reference)
This is does not correspond with actual perception (which can be widely different between individuals) but with minimum contrast, to allow accessibility testing.

Ideally, I should instead convert RGB values to the LMS colour space, then apply the appropriate matrix, and then convert the colours back to RGB, but this approach seems to fail because of clipping.

In addition, two filters are provided that remap either red or green to blue, which can help pro- or deuteranopes distinguish between these two colours. This method of colour enhancement for colour blind people is far from perfect, but can help read red-green gradients, for example.

Contact // Home

About this site