Colour Blindness Checker
See an image or a colour pair the way people with colour vision deficiency see it, and check the WCAG contrast at the same time. Free, instant, and your files never leave your device.
Images are read and redrawn entirely inside your browser. Nothing is uploaded, and nothing is stored when you close the page.
Normal body text at around 16 pixels, the size most paragraphs use.
Large text, 24 pixels bold
The simulated ratios are a guide, not a WCAG requirement. If a pair keeps a healthy ratio under every simulation, it is far less likely to collapse for a reader with colour vision deficiency. If two colours look almost identical in one of the panels, add a difference that does not depend on hue, such as labels, patterns or a change in lightness.
How to use the Colour Blindness Checker
- Stay on the Image tab and drop in a chart, worksheet, map, screenshot or design. You can also click the box to browse, or paste a copied image straight from the clipboard.
- Compare the original with the protanopia, deuteranopia, tritanopia and greyscale panels. Anything that stops being readable in one of them is a problem worth fixing.
- Download any simulated view as a PNG if you want to share it with a client, a colleague or a class.
- Switch to the Colour pair tab to test a specific text and background combination, read the WCAG contrast ratio, and see the pass or fail result for AA and AAA at normal and large text sizes.
- Check the simulation strip underneath the pair to make sure the two colours do not merge together for readers with colour vision deficiency.
Why use ZillaKit's Colour Blindness Checker?
Roughly one man in twelve and one woman in two hundred has some form of colour vision deficiency, so a red and green chart legend, a form that marks errors in red alone, or a map keyed only by hue will fail a real slice of any audience. The trouble is that the person designing the material usually cannot see the problem, because their own colour vision fills in the difference. Simulating the common types of colour vision deficiency is the fastest way to catch that blind spot before the work is printed, published or handed to a class.
This checker runs two jobs in one page. The image side takes whatever you drop in and redraws it four times: protanopia (reduced or absent red cone response), deuteranopia (the green cone equivalent, and the most common type), tritanopia (the rare blue and yellow type), and achromatopsia, which shows the picture with no colour information at all and doubles as a useful print and photocopy test. The simulations use published transformation matrices applied in linear light rather than a quick hue shift, so the results are closer to what the research describes. The colour pair side calculates the WCAG 2 contrast ratio between a foreground and a background, reports pass or fail against the 4.5:1, 3:1 and 7:1 thresholds, and then shows that same pair under every simulation so you can see whether a palette survives.
Everything happens in your browser using canvas pixel operations. No image is uploaded, no colour value is logged, and no account is needed, which makes the tool safe for unreleased designs, client work, student records and internal dashboards. Large images are scaled down before processing so the page stays responsive, and the pixel work is done in small chunks so the browser never freezes. If your browser supports the EyeDropper API, a Pick button appears so you can lift a colour straight off anything on screen, including the image you just loaded.
FAQ
What is the difference between protanopia, deuteranopia and tritanopia?
They describe which type of cone in the eye is missing or altered. Protanopia affects the long wavelength (red) response, deuteranopia affects the medium wavelength (green) response, and both make reds, greens, browns and oranges hard to tell apart. Tritanopia affects the short wavelength (blue) response and confuses blues with greens and yellows with pinks. Deuteranopia and its milder form deuteranomaly are by far the most common.
How accurate are the simulations?
They use widely published transformation matrices for the severe form of each deficiency, applied in linear light. They are a good working approximation and are what most design tools use, but no simulation can reproduce an individual person's colour vision exactly, and milder forms will see more colour difference than these panels show.
What contrast ratio do I actually need?
WCAG 2 asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 for normal text and 4.5:1 for large text at level AAA. Large text means about 24 pixels, or 19 pixels when bold.
Does passing contrast mean my colours are colour blind friendly?
Not by itself. Contrast measures lightness difference, so two colours can pass comfortably and still be impossible to tell apart for someone with colour vision deficiency, or the reverse. Check both: the ratio for legibility, and the simulations for whether the colours stay distinguishable. Where colour carries meaning, back it up with labels, shapes, patterns or text.
Are my images uploaded to a server?
No. The file is read locally with the FileReader and canvas APIs, processed in your browser's memory, and discarded when you leave the page. Nothing is transmitted anywhere.
Which image formats work?
Anything your browser can decode, which normally covers PNG, JPEG, WebP, GIF, BMP and SVG. Very large images are scaled down to 1600 pixels on the longest edge before processing so the simulations stay fast.