Color Blindness Simulator
Simulate how colors appear to people with protanopia, deuteranopia, and tritanopia.
Red
Green
Blue
Orange
Purple
Yellow
Cyan
Pink
About This Tool
The Color Blindness Simulator applies CSS color matrix filters to a set of sample colors, letting you see how your designs appear to people with different types of color vision deficiency.
Use this tool when designing UI components, charts, maps, or any visual content that relies on color to convey information, to ensure accessibility for all users.
Color Blindness Types
- Normal Vision: Normal Vision: full color perception
- Protanopia (red-blind): Protanopia: missing red cones (affects ~1% of males)
- Deuteranopia (green-blind): Deuteranopia: missing green cones (most common, ~1% of males)
- Tritanopia (blue-blind): Tritanopia: missing blue cones (rare, ~0.003%)
- Achromatopsia (no color): Achromatopsia: no color perception, only grayscale (very rare)
- Achromatomaly (reduced color): Achromatomaly: reduced color sensitivity across multiple cone types
How to Use
- Select a simulation type from the dropdown.
- Observe how the color swatches and spectrum change under the selected filter.
- Compare filtered results against Normal Vision to identify problematic color combinations.
Use Cases
UI/UX designers check that button states and status indicators remain distinguishable. Data visualization creators ensure chart colors are accessible. Game developers verify that UI elements do not rely solely on color. Marketing teams review brand assets for color blindness accessibility.
FAQ
- How accurate are these simulations? β The simulations use established color matrix transforms and are a good approximation. They may not perfectly replicate individual perception, but they give designers a reliable indication of potential issues.
- What percentage of people have color blindness? β Approximately 8% of males and 0.5% of females have some form of color vision deficiency. Deuteranomaly (reduced green sensitivity) is the most common type.
- What is the best way to design for color blindness? β Use color combined with other visual cues such as shape, pattern, label, or texture. Ensure sufficient contrast between elements. Test with multiple simulation types.