Color Blindness Simulator
Preview how your colors appear to users with color vision deficiency and check WCAG contrast ratios for accessibility compliance.
Understanding Color Blindness
Color blindness (color vision deficiency) occurs when one or more types of cone cells in the eye are absent or malfunction. It affects approximately 8% of men and 0.5% of women worldwide.
Types of Color Blindness
- Protanopia: Missing L-cones (red receptors). Reds appear dark or black. Red/orange/green confusion.
- Deuteranopia: Missing M-cones (green receptors). Most common type (~5β8% of males). Red/green confusion.
- Tritanopia: Missing S-cones (blue receptors). Rare. Blue/yellow and purple/red confusion.
WCAG Contrast Requirements
- AA: 4.5:1 for normal text, 3:1 for large text (18pt+)
- AAA: 7:1 for normal text, 4.5:1 for large text
Design tip: never use color alone to convey information β always pair it with icons, patterns, or text labels.
Types of Color Blindness
- Protanopia: Missing L-cones (red receptors). Reds appear dark or black. Red/orange/green confusion.
- Deuteranopia: Missing M-cones (green receptors). Most common type (~5β8% of males). Red/green confusion.
- Tritanopia: Missing S-cones (blue receptors). Rare. Blue/yellow and purple/red confusion.
WCAG Contrast Requirements
- AA: 4.5:1 for normal text, 3:1 for large text (18pt+)
- AAA: 7:1 for normal text, 4.5:1 for large text
Design tip: never use color alone to convey information β always pair it with icons, patterns, or text labels.