liminfoColor Blindness Simulator
Free web tool: Color Blindness Simulator
Original
#e53e3e
Protanopia
Red-blind (Type 1)
#9d9b3e
Deuteranopia
Green-blind (Type 2)
#a6b33e
Tritanopia
Blue-blind (Type 3)
#dd3e3e
Protanomaly
Red-weak
#c6763e
Deuteranomaly
Green-weak
#c4693e
Tritanomaly
Blue-weak
#df3e3e
Achromatopsia
Total color blindness
#707070
Achromatomaly
Color weakness
#a55959
About Color Blindness Simulator
The Color Blindness Simulator applies scientifically established color transformation matrices to a chosen hex color and renders side-by-side swatches showing how that color appears under eight distinct types of color vision deficiency. Supported types include Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), Protanomaly (red-weak), Deuteranomaly (green-weak), Tritanomaly (blue-weak), Achromatopsia (total color blindness), and Achromatomaly (color weakness). Each matrix is a published 3×3 linear transformation derived from the Daltonize research methodology.
UI/UX designers, front-end developers, graphic artists, and accessibility specialists use this tool to verify that their color choices remain distinguishable to users with color vision deficiency, which affects approximately 8% of males and 0.5% of females. Designing with color blindness awareness is a requirement of WCAG 2.1 Success Criterion 1.4.1 (Use of Color), which prohibits using color as the sole means of conveying information.
Technically, the tool converts the input hex string to an RGB triplet, then applies a matrix multiplication for each deficiency type. The 3×3 matrix blends the original R, G, and B channels into simulated channels that represent the reduced spectral sensitivity of each deficiency. Results are clamped to the 0–255 range and converted back to hex for display. All processing runs in the browser via React's useMemo hook — no server uploads, no latency.
Key Features
- 8 color vision deficiency types: Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly, Tritanomaly, Achromatopsia, Achromatomaly
- Visual color swatch for each type displayed side by side with the original color
- Hex color picker and text input — choose a color visually or type a hex code
- Each swatch shows the simulated hex value for reference and comparison
- Scientific 3×3 matrix transformation derived from Daltonize research
- 100% client-side processing using React useMemo — instant, zero server latency
- Supports both Korean and English labels for all deficiency type names
- Responsive grid layout for easy side-by-side comparison on any screen size
Frequently Asked Questions
What is color blindness?
Color blindness (color vision deficiency) is a condition in which the eye's cone cells have reduced or absent sensitivity to certain wavelengths of light. The most common forms are red-green color blindness (Protanopia and Deuteranopia), affecting about 1 in 12 men. Blue-yellow deficiencies (Tritanopia) are rarer. Achromatopsia, total color blindness, is very rare.
What is the difference between Protanopia and Deuteranopia?
Both are forms of red-green color blindness, but they differ in which cone type is affected. Protanopia results from absent or non-functional L-cones (long-wavelength, red-sensitive), making reds appear dark and greenish. Deuteranopia results from absent M-cones (medium-wavelength, green-sensitive), causing reds and greens to appear as similar brownish or yellowish hues.
How does the simulation matrix work?
The simulation applies a 3×3 matrix to the RGB values of a color. Each row of the matrix determines how much the original red, green, and blue channels contribute to the simulated channel. For example, the Protanopia matrix shifts sensitivity away from the red channel and redistributes it across green and blue, mimicking the loss of L-cone function.
Why should designers care about color blindness?
Approximately 300 million people worldwide have some form of color vision deficiency. If your design relies on color alone to convey meaning — such as red for errors and green for success — colorblind users may not receive that information. WCAG 2.1 criterion 1.4.1 specifically prohibits using color as the only visual means of conveying information.
What hex colors are hardest for colorblind users to distinguish?
Red (#FF0000) and green (#00FF00) are the most problematic pair for users with Protanopia or Deuteranopia — they can appear nearly identical. Orange and red are also frequently confused. For Tritanopia, blue and green can look similar, as can yellow and violet. This tool helps you verify any specific color you plan to use.
How can I make my design more accessible for colorblind users?
Use redundant cues alongside color: icons, patterns, labels, or text. Choose palettes that remain distinguishable under simulation — for example, replacing red/green with orange/blue. Tools like this simulator and contrast checkers help validate your choices before publishing.
What is Achromatopsia?
Achromatopsia is the rarest and most severe form of color blindness, in which the person perceives no color at all — only shades of gray. It results from absent or non-functional cone cells (all three types). The simulation matrix converts the RGB triplet to a weighted grayscale value using standard luminance coefficients (0.299 R, 0.587 G, 0.114 B).
Is this simulator accurate enough for professional accessibility audits?
The simulator provides a good approximation based on published linearization matrices and is suitable for design review and general accessibility testing. For formal WCAG audits, it should be combined with official accessibility testing tools and real-user testing with colorblind participants, as individual perception can vary.