DarnlyColor blindness simulator: see your site the way color-blind users do
Drop a screenshot and swipe between your view and theirs. We point out colors that turn into the same color, like a red and a green that a color-blind user can’t tell apart. It runs in your browser, so nothing is uploaded.
How this works
Your screenshot is drawn onto a canvas in your browser, and every pixel is run through the Machado, Oliveira and Fernandes (2009) color-vision model at full strength, in linear RGB. Achromatopsia uses the screen’s brightness (Rec. 709 luminance) only.
To find colors that turn into the same color, we take the main colors of your screenshot, then flag any two that are clearly different to you but nearly identical after the simulation. Big screenshots are scaled to at most 1600 pixels wide first so it stays fast.
Many color-blind people have a milder form than shown here, so this is the worst case. Colors that differ in lightness, not just hue, stay apart for everyone.
More free tools
How it works
- Drop in a screenshot of your site or app. You can also paste one straight from your clipboard. Until you do, we show a sample dashboard.
- Pick a type of color blindness, then drag the slider across the picture to swipe between what you see and what they see.
- Look at the warning box. It lists colors in your screenshot that turn into the same color, like a red error and a green success badge. Fix those by adding an icon, a label or a stronger difference in lightness.
Questions
Is my screenshot uploaded anywhere?
No. Everything happens in your browser. Your screenshot never leaves your computer.
How many people are color-blind?
About 1 in 12 men and 1 in 200 women. Most of them have trouble telling red and green apart (deuteranopia and protanopia, or milder forms of them). Blue and yellow trouble (tritanopia) and seeing no color at all (achromatopsia) are rare.
How accurate is the simulation?
We use the Machado, Oliveira and Fernandes model (2009), the one Chrome’s DevTools and most design tools use, at full strength. Real people vary, and many have a milder form, so treat it as the worst case.
Two of my colors look the same. How do I fix it?
Don’t rely on color alone. Add an icon (✓ or ✕), a text label, or a pattern. Or make one color clearly lighter or darker than the other: lightness survives every type of color blindness. Then check your text with the contrast checker.
Can my AI coding agent fix it for me?
Yes. Tell Claude Code, Codex or Cursor something like “Our red error and green success states look the same to color-blind users. Add an icon to each and make the error color darker.” The hex codes in the warning box help.