Free tool
Colour Blindness Simulator for Screenshots and Colour Codes
Drop in a screenshot of a page, chart or app screen and see how it can look to people with different kinds of colour vision. You can also paste colour codes and see which ones become hard to tell apart.
Simulation: Machado, Oliveira and Fernandes (2009). Milder forms are approximated with the strength slider.
Each colour as it looks at full strength. Two colours that end up close in a column are hard to tell apart for that group.
Your picture is processed in your browser and never uploaded. Your chosen view, strength and colour list are saved on this device only.
What to check with a simulator
Colour is often the only thing separating two parts of a screen. A red error and a green success. A pink line and a green line in a chart. A link that is only a different colour from its text. If a visitor cannot tell those colours apart, the page fails them even when it looks fine to you.
Drop a JPG, PNG or WebP onto the page, click to choose a file, or paste a screenshot. There is also a sample picture if you only want to see how the tool behaves. Then choose how to view it.
The views on offer
| View | Meaning |
|---|---|
| All side by side | Original plus all four simulated views in one grid |
| Protanopia | Red-blind |
| Deuteranopia | Green-blind |
| Tritanopia | Blue-blind |
| Achromatopsia | No colour, shown as grey |
When you pick a single view, a Strength slider appears. At full strength the result matches the published model. Lower values are an approximation made by blending the simulated picture with the original, which gives a feel for milder forms.
Save all views as one picture downloads the grid as a single image, which is useful for an accessibility note or a review thread.
How the simulation is made
The tool applies the matrices from Machado, Oliveira and Fernandes (2009) to each pixel, in linear RGB. That is a published model for these vision types. It is a way to check designs, not an eye test, and it cannot tell you how any one person sees.
Treat the result as a warning light. If two items merge in a view, that is the moment to add another cue, such as a label, a pattern, an icon or a difference in lightness.
Testing colour codes without a picture
The lower box takes up to 12 HEX codes. The tool shows each colour as it looks at full strength for each group. Two colours that end up close in a column are hard to tell apart for that group.
- Paste your brand or chart colours into the box.
- Read down each column, not across.
- If two swatches look alike, change one of them in lightness, not only in hue.
If you are building a palette from scratch, our web design and UI/UX work treats accessible colour as part of the first design round rather than a late fix.
When in the project to run the check
The cheapest time is at wireframe or first colour stage, before a palette is built into dozens of components. Run the main screens through the All side by side view, and keep the saved grid with the design notes so the reasons for a choice are written down.
Run it again before launch on real screenshots. Charts, status labels, form errors and sale badges are the places where colour tends to carry meaning without anyone noticing, so open those screens first.
If a page uses a photo with text on top, test that too. A caption that sits well on a bright patch of the photo can vanish in the greyscale view.
Fixes that survive any view
- Add a second cue. Use an icon, an underline or text next to a colour that carries meaning.
- Vary lightness. Colours that differ in how light or dark they are stay separate in the greyscale view.
- Label chart lines directly. It beats a colour key that needs matching by eye.
- Check the greyscale view first. If a design works with no colour at all, it is usually safe in the other views.
A simulator also cannot test contrast between text and its background. For that, use a contrast checker alongside it.
Frequently asked questions
What are protanopia, deuteranopia and tritanopia?
They are kinds of colour vision difference. Protanopia is red-blind, deuteranopia is green-blind and tritanopia is blue-blind.
Is this simulator an eye test?
No. It is a design check that shows a model of the effect. It cannot tell you how a particular person sees.
Does the picture leave my computer?
No. The simulation runs in your browser and the picture is never uploaded.
How do I test only my brand colours?
Paste up to 12 HEX codes into the colour box under the picture area. Look down each column for swatches that end up close together.
What does the strength slider do?
It blends the full simulation with the original to approximate milder forms. At full strength you see the published model result.
Can I save the comparison?
Yes. Use Save all views as one picture to download the original and the simulated views in a single image.
More free tools
- Color contrast checker: Test colours against WCAG 2.2, fix them, check a palette and share a link.
- Colour palette generator: Generate website colour palettes by harmony, check text contrast, and export CSS, Tailwind, SVG or PNG.
- Image colour picker: Pick exact colours from a picture, average noisy pixels and build a palette from the image.
- Lighten and darken colour tool: Lighten or darken a colour, build 50 to 950 scales, and copy them as CSS, Tailwind, SCSS or JSON.