ACCESSIBILITY
Colorblind Checker
Simulate protanopia, deuteranopia, and tritanopia on your palette — flag confusable pairs.
COLOR ACCESSIBILITY
Check your UI colors
| Name | Color | Hex | |
|---|---|---|---|
Colorblind accessibility guide
Red health bars, green friendly markers, blue enemy outlines — the classic color scheme that about 8% of men cannot reliably distinguish. This tool simulates how your palette looks under the three main types of color blindness and flags pairs that collapse into the same shade, so accessibility is a design decision instead of an accident.
Who is affected
Protanopia (red-blind) and deuteranopia (green-blind) are the common forms, both mostly affecting men (~8% combined). Tritanopia (blue-blind) is rarer (~0.01%) but still worth checking. The practical rule: red vs green is the dangerous pairing; blue vs purple and cyan vs white are also risky.
Simulations like this one transform colors into an approximation of what each type sees. They are not medical-grade, but they reliably catch the catastrophic pairings — which is what you need in a design review.
Never rely on color alone
The robust fix is a second channel: icons, shapes, text labels, or patterns. A health bar that changes shape or shows a number works for everyone. This is why serious games pair color with symbols — colorblind players should not have to memorize which shade means which team.
Tip: Test your palette at 60% desaturation too — not just colorblind simulation. Low-contrast pairs that vanish when washed out will also fail on cheap monitors and bright sunlight, the two most common real-world viewing conditions.
Frequently asked questions
What colors should I avoid?
Red vs green is the classic failure. Also risky: blue vs purple, cyan vs white, and dark red vs black. Use this tool with your actual palette to see which pairs collapse.
How do I make UI accessible to colorblind players?
Add a non-color channel: icons, text, shapes, or patterns. A "low HP" state should change shape or show a number, not just turn red.
What is the difference between protanopia and deuteranopia?
Protanopia lacks red cones (reds look darker and greener); deuteranopia lacks green cones (greens look redder). Both collapse red/green distinctions, but the simulated images differ — this tool shows both.
Privacy note: color simulations happen in your browser. Nothing is uploaded.