Color Blindness Simulator
Preview how your colors and images appear to users with different types of color blindness.
How this color appears with different vision types
Image simulation
About Color Blindness
~8% of males and 0.5% of females have some form of color vision deficiency. Deuteranopia (green-blind) is the most common. Design accessible UIs by not relying on color alone — always use shape, text, or pattern as a secondary indicator.
Frequently Asked Questions
What are the types of color blindness?▼
The main types: Deuteranopia — reduced sensitivity to green (most common, ~5% of males). Protanopia — reduced sensitivity to red (~1% of males). Tritanopia — reduced sensitivity to blue (rare, ~0.001%). Achromatopsia — sees only grayscale (very rare). There are also milder forms: deuteranomaly (anomalous green) and protanomaly (anomalous red).
How do I make my design accessible for color blind users?▼
Key rules: (1) Never use color alone to convey meaning — add text labels, icons, or patterns. (2) Ensure sufficient contrast between adjacent colors. (3) Avoid red/green combinations. (4) Use color blind-friendly palettes (e.g., ColorBrewer scales). (5) Test with tools like this one or browser extensions.
What colors are hardest for color blind users?▼
Red-green confusion is most common: traffic lights, success/error states (use icons too), map legends. Blue-yellow is less common but purple can look blue, and yellow can look desaturated. Completely avoiding red/green isn't necessary — ensuring sufficient luminance contrast between them helps.
Are there WCAG guidelines for color blindness?▼
WCAG 1.4.1 (Use of Color) requires that color is not the only visual means of conveying information, indicating an action, or distinguishing a visual element. This is a Level A requirement. The contrast ratio requirements (1.4.3 and 1.4.11) also indirectly help because they ensure luminance differences that color blind users can still perceive.