liminfoColor Blindness Test
Free web tool: Color Blindness Test
Original
#3b82f6
Protanopia
#5a5ada
Deuteranopia
#5650d3
Tritanopia
#3fc4bf
Protanomaly
#486ae8
Deuteranomaly
#4970e6
Tritanomaly
#3da1e1
Achromatopsia
#7a7a7a
Achromatomaly
#5d7eb2
About Color Blindness Test
The Color Blindness Simulator transforms any hex color into its appearance under eight distinct types of color vision deficiency. Enter a hex color code (or use the color picker) and the tool instantly renders side-by-side swatches for Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly, Tritanomaly, Achromatopsia, and Achromatomaly — all alongside the original color for direct comparison.
UI/UX designers, web developers, graphic artists, and accessibility engineers use this tool to evaluate whether their color choices are perceivable by users with color vision deficiencies. Roughly 8% of males and 0.5% of females have some form of color blindness, making accessible color selection a critical design concern. This simulator helps identify problematic color combinations before deployment, without requiring users to install browser plugins or design software.
Each simulation uses a scientifically derived transformation matrix applied to the RGB components of the input color. For example, Protanopia (red-blindness) uses a 3x3 matrix that redistributes red channel values into green and blue, accurately modeling the absence of L-cone photoreceptors. Results update in real time as you type or adjust the color picker, and clicking any swatch copies its hex code to the clipboard.
Key Features
- Simulates 8 types of color vision deficiency: Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly, Tritanomaly, Achromatopsia, and Achromatomaly
- Side-by-side grid layout showing original color and all 8 simulated variants simultaneously
- Hex color text input and native browser color picker for easy color selection
- Real-time simulation — results update instantly as you type or pick a new color
- Click-to-copy: click any color swatch to copy its simulated hex code to the clipboard
- Scientifically validated transformation matrices for accurate color vision deficiency modeling
- Displays hex codes under each swatch for direct use in CSS or design tools
- 100% client-side processing — all matrix computations run in the browser with no server calls
Frequently Asked Questions
What color vision deficiency types does this tool simulate?
The tool simulates 8 types: Protanopia (no red cones), Deuteranopia (no green cones), Tritanopia (no blue cones), Protanomaly (weakened red cones), Deuteranomaly (weakened green cones), Tritanomaly (weakened blue cones), Achromatopsia (complete color blindness, only luminance), and Achromatomaly (partial complete color blindness).
How does the color transformation work technically?
Each simulation applies a 3x3 transformation matrix to the RGB values of the input color. The matrix redistributes the RGB channels to model how each type of color receptor deficiency affects color perception. For example, the Achromatopsia matrix uses luminance weights (0.299, 0.587, 0.114) applied equally to R, G, and B channels to produce a grayscale equivalent.
Why is color blindness simulation important for designers?
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. If important information is conveyed only through color (e.g., red for error, green for success), color-blind users may miss it. This tool helps designers identify and fix such issues during the design phase rather than after launch.
What is the most common type of color blindness?
Deuteranomaly (weakened green cone sensitivity) is the most common form, affecting about 5% of males. Protanomaly (weakened red cones) and Deuteranopia (absent green cones) are also common. Tritanopia (blue-yellow deficiency) and Achromatopsia (complete color blindness) are comparatively rare.
Can I test a CSS color value directly?
Yes. Enter any valid 6-digit hex color code in the text input field, with or without the "#" prefix. The tool parses the hex value, converts it to RGB, applies each transformation matrix, and converts back to hex for display. You can also use the color picker to visually select a color.
What does Achromatopsia look like compared to the original?
Achromatopsia simulates complete monochromacy — the absence of all color cone function. The result is a pure grayscale value calculated using standard luminance weights (R×0.299 + G×0.587 + B×0.114). A bright red (#FF0000) becomes a dark gray because red has relatively low luminance.
How can I copy a simulated color to use in my design tool?
Click on any color swatch in the results grid and the simulated hex code will be copied to your clipboard automatically. You can then paste it directly into CSS, Figma, Sketch, or any other design tool.
Is this tool suitable for WCAG accessibility compliance checks?
This tool simulates how colors appear to color-blind users, which is complementary to WCAG contrast ratio checks. For full WCAG 2.1 compliance, you should also verify that your color combinations meet minimum contrast ratios (4.5:1 for normal text). Use this simulator to ensure critical UI elements are distinguishable across all simulated vision types.