Color Blindness Simulator
Preview how a color appears with protanopia, deuteranopia, tritanopia and achromatopsia.
Enter a color and see four side-by-side simulations covering the most common types of color vision deficiency. Useful for verifying that brand colors, charts and UI states remain distinguishable for users with color blindness.
Common use cases
- Audit data-visualization palettes for color-blind accessibility
- Pick UI status colors (success/error) that remain distinguishable
- Preview brand swatches against deuteranopia (the most common type)
- Check chart legends, badges and badges for protan/tritan safety
Frequently asked questions
How accurate are the simulations?▾
We apply the standard color deficiency matrices used by most simulators (Machado / Viénot et al.). They are good visual approximations but real perception varies between individuals.
Should I use this instead of WCAG contrast checks?▾
No, use both. Color blindness simulation checks if hues stay distinguishable; WCAG contrast ensures luminance contrast for low-vision users. They complement each other.
What is achromatopsia?▾
Total color blindness — vision is monochromatic. Our simulation uses the luminance channel (BT.601 weights) to render a grayscale equivalent.
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
🎨
Color Palette Generator
Generate harmonious color schemes from a base color.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.