Protanopia is a type of red-green colour blindness caused by the absence of the long-wavelength (red) cones in the retina. People with protanopia cannot distinguish between red and green, and red colours appear darker or absent. Protanopia affects approximately 1% of men. Protanomaly is a milder version where red cones are present but less sensitive than normal.

Tritanopia is a form of blue-yellow colour blindness caused by the absence or malfunction of short-wavelength (blue) cones. It is much rarer than red-green colour blindness, affecting fewer than 1 in 10,000 people. People with tritanopia have difficulty distinguishing blue from green and yellow from red. Unlike red-green colour blindness, tritanopia affects men and women equally.

Color Blindness Simulator – 8 Types & Severity Slider

Q: What is colour blindness?

Colour blindness (colour vision deficiency or CVD) is an inability or reduced ability to distinguish certain colours. It affects approximately 8% of men and 0.5% of women of Northern European descent. The most common types are red-green colour blindness (protanopia and deuteranopia), which affect the ability to distinguish red and green. Blue-yellow colour blindness (tritanopia) is rarer. Complete colour blindness (achromatopsia), where everything appears in shades of grey, is very rare.

Q: What is deuteranopia?

Deuteranopia is the most common form of red-green colour blindness, affecting approximately 5% of men. It is caused by the absence of medium-wavelength (green) cones. People with deuteranopia cannot distinguish red from green, and greens appear washed out. Deuteranomaly is the milder, partial version and is the most common single form of colour vision deficiency overall.

Q: What is achromatopsia?

Achromatopsia (total colour blindness) is an extremely rare condition where a person sees everything in shades of grey. It results from the complete absence or non-functioning of all cone cells in the retina. People with achromatopsia also typically have poor visual acuity, extreme sensitivity to light (photophobia), and involuntary eye movements (nystagmus). It affects approximately 1 in 30,000 people.

Q: How does this colour blindness simulator work?

This simulator applies mathematically derived colour transformation matrices to each pixel of your uploaded image. The matrices are based on research by Machado, Oliveira and Fernandes (2009) which modelled colour vision deficiency using cone response curves and opponent colour theory. The severity slider interpolates between the original colours and the fully simulated CVD colours, allowing you to simulate partial colour vision deficiencies. All processing runs in your browser using the HTML Canvas API - your images are never uploaded to any server.

Q: Why should designers test for colour blindness?

Approximately 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. If a design relies solely on colour to convey information (e.g. red for error, green for success), colour blind users may not receive that information. WCAG 2.1 Success Criterion 1.4.1 requires that colour is not used as the sole visual means of conveying information. Testing designs through a colour blindness simulator helps identify potential accessibility issues before publishing.

Q: What is the severity slider?

The severity slider lets you simulate partial colour vision deficiencies at any level from 0% (normal vision) to 100% (complete deficiency). For example, many people with deuteranomaly have a partial deficiency - their green cones work but are less sensitive than normal. Setting the severity to 50% simulates this intermediate level. This feature is absent on most free online colour blindness simulators, which only show the full 100% deficiency version.

Key features

Everything the Colour Blindness Simulator Does

👁

8 CVD Types Simulated

Protanopia, Deuteranopia, Tritanopia, Achromatopsia (monochromacy), Protanomaly, Deuteranomaly, Tritanomaly and Achromatomaly - all 8 major types of colour vision deficiency shown simultaneously.

🎚

Severity Slider

Adjust simulation severity from 0% (normal vision) to 100% (complete deficiency). Simulates partial CVD at any level - unique among free tools. Useful for simulating anomalous trichromacy conditions.

📸

Side-by-Side Grid

All 8 CVD simulations shown simultaneously in a grid alongside the original image. Instantly see which colour combinations cause problems for colour blind users.

⬇

Export All 8 Views

Download all 8 simulations stitched into one comparison image. Share with clients or include in accessibility audit reports. Exported as a single PNG.

🔒

100% Client-Side

All image processing runs in your browser using the HTML Canvas API. Your images are never uploaded to any server. Works offline after the page loads. No account or login required.

💧

Drag & Drop Upload

Drag and drop any image file onto the upload zone, or click to browse. Supports JPG, PNG, GIF and WebP formats. No file size restrictions beyond your browser's memory.

📊

Based on Research Matrices

Uses the Machado, Oliveira and Fernandes (2009) colour transformation matrices, derived from cone spectral sensitivity functions. Scientifically grounded simulation, not approximate colour swaps.

♿

WCAG Accessibility Testing

Identifies whether your design communicates information through colour alone. WCAG 2.1 SC 1.4.1 requires that colour is not the sole visual means of conveying information.

⚡

Instant Processing

Simulations render immediately on upload. Severity changes update all 8 views in real time as you drag the slider.

How to use

How to Use the Colour Blindness Simulator

Upload your image

Drag and drop any image file onto the upload zone, or click Choose Image to browse. Works with screenshots, design mockups, charts, infographics, logos and photographs. Supports JPG, PNG, GIF and WebP.

See all 8 CVD simulations at once

The grid immediately shows your image as it would appear to people with each of the 8 types of colour vision deficiency: Protanopia, Deuteranopia, Tritanopia, Achromatopsia, Protanomaly, Deuteranomaly, Tritanomaly and Achromatomaly.

Adjust the severity slider

Drag the Severity slider from 0% (normal vision) to 100% (complete deficiency). All 8 simulations update in real time. Use values between 30-80% to simulate anomalous trichromacy - partial colour vision deficiencies that are actually more common than complete deficiencies.

Identify accessibility problems

Look for areas where important information becomes unreadable or indistinguishable. Pay particular attention to red-green combinations (Protanopia and Deuteranopia views) as these affect the largest group of colour blind users.

Export the comparison image

Click Export All Views to download all 8 simulations stitched into one comparison PNG. Include it in accessibility audit reports, share it with clients to explain colour blindness issues, or use it in design reviews.

Fix and re-test

After updating your design to use patterns, labels or icons in addition to colour, upload the revised image and re-run the simulation to confirm the information is now accessible to colour blind users.

Competitor comparison

Colour Blindness Simulator: LazyTools vs Competitors

Most free online colour blindness simulators show only the most common 3-4 types without a severity slider. The severity slider - simulating partial CVD - is the key differentiator absent on free tools.

Feature	LazyTools	color-blindness.com	pilestone.com	toptal.com/designers
CVD types simulated	8 types	8 types	4 types	6 types
Severity / partial CVD slider	Yes (0-100%)	No	No	No
All views simultaneously	Yes (grid)	Yes	One at a time	One at a time
Export all views	Yes (one PNG)	No	No	No
Image stays in browser	Yes (100%)	Yes	Server upload	Yes
Research-based matrices	Machado 2009	Yes	Approximate	Yes
No login required	Yes	Yes	Yes	Yes

CVD guide

Types of Colour Vision Deficiency

Colour vision deficiency (CVD) affects the ability to distinguish certain colours. It is caused by the absence or malfunction of one or more types of cone cells in the retina. There are three types of cones, sensitive to long (L/red), medium (M/green), and short (S/blue) wavelengths of light.

CVD Type	Affected cone	Prevalence (men)	What is confused
Protanopia	L (red) absent	~1%	Red and green; red appears dark/black
Protanomaly	L (red) weak	~1%	Red and green (milder); poor red sensitivity
Deuteranopia	M (green) absent	~1%	Red and green; greens look washed out
Deuteranomaly	M (green) weak	~5%	Red and green (milder); most common CVD
Tritanopia	S (blue) absent	<0.01%	Blue and green; yellow and red
Tritanomaly	S (blue) weak	<0.01%	Blue and green (milder)
Achromatopsia	All cones absent	<0.003%	All colour; sees only grey
Achromatomaly	All cones weak	Rare	Reduced colour discrimination overall

How do colour blind people see my design?

The most common question designers ask is how colour blind people see their work. For red-green colour blindness (affecting roughly 8% of men), the primary issue is distinguishing red from green. Traffic lights, error and success states, data charts using red and green, and form validation feedback are all common problem areas. This colour blindness simulator for images online free shows exactly what your design looks like through each type of CVD, so you can identify and fix these issues before publishing.

Protanopia and deuteranopia simulator: the red-green gap

The protanopia and deuteranopia simulator views are the most important for most web designers. Together, protanopia and deuteranopia (and their milder variants) affect approximately 8% of men. Both conditions cause red-green confusion, but in different ways: protanopia results in reduced sensitivity to red wavelengths, making reds appear darker or even black. Deuteranopia affects green sensitivity, making greens look more greyish. Both conditions make it impossible to distinguish red from green at similar brightness levels.

Tritanopia simulator: the blue-yellow issue

The tritanopia simulator shows how people with blue-yellow colour blindness see your design. Tritanopia is much rarer than red-green CVD (affecting fewer than 1 in 10,000 people) but unlike red-green CVD, it affects men and women equally. People with tritanopia have difficulty distinguishing blue from green and yellow from red. Blue warning colours on yellow backgrounds and cyan-on-blue combinations are common problem areas.

Achromatopsia simulator: designing for complete colour blindness

The achromatopsia simulator (complete colour blindness) shows your design in pure greyscale. While achromatopsia is extremely rare (approximately 1 in 30,000), designing well for achromatopsia means designing well for all colour blind users: if your design is comprehensible in greyscale, all colour information has been supplemented with shape, pattern, label or position cues that work for everyone. The greyscale view is also useful for checking the luminance contrast of your design elements.

Web accessibility color test free: WCAG 1.4.1

WCAG 2.1 Success Criterion 1.4.1 (Use of Colour, Level A) states that colour must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This means form fields cannot show validation state through red/green colouring alone - they need an icon, text label or border style change in addition. Data charts cannot use only colour to distinguish data series - they need patterns, labels or shapes. This colour blindness simulator is a practical web accessibility color test free tool to identify these WCAG failures before they reach production.

CVD design review tool: practical recommendations

After running your design through this CVD design review tool, the standard fixes for colour blindness accessibility are: add icons or symbols alongside colour-coded states (a checkmark for success, an X for error); use patterns in addition to colours in charts and graphs; ensure sufficient luminance contrast between foreground and background elements (check with the WCAG Contrast Checker); avoid relying on red-green combinations for important state changes; and use colour-blind-safe palettes (such as the Okabe-Ito palette) for data visualisation.

FAQ

Frequently Asked Questions

What is colour blindness?▼

Colour vision deficiency (CVD) is an inability or reduced ability to distinguish certain colours. It affects approximately 8% of men and 0.5% of women. The most common types are red-green CVD (protanopia, deuteranopia). Blue-yellow CVD (tritanopia) is rarer. Complete colour blindness (achromatopsia) is very rare, affecting 1 in 30,000.

What is protanopia?▼

Protanopia is red-green colour blindness caused by absence of red (long-wavelength) cones. Affects approximately 1% of men. Red colours appear dark or black. Protanomaly is the milder partial version with reduced red cone sensitivity.

What is deuteranopia?▼

Deuteranopia is the most common form of red-green CVD, affecting approximately 5% of men. Caused by absence of green (medium-wavelength) cones. Greens appear washed out, and red-green discrimination is lost. Deuteranomaly (partial version) is the single most common CVD type overall.

What is tritanopia?▼

Tritanopia is blue-yellow colour blindness caused by absent or malfunctioning blue (short-wavelength) cones. Affects fewer than 1 in 10,000 people, and unlike red-green CVD, affects men and women equally. Blue and green become confused, as do yellow and red.

What is achromatopsia?▼

Achromatopsia (total colour blindness) means seeing everything in shades of grey due to complete absence of functioning cone cells. Extremely rare (1 in 30,000). Also causes poor visual acuity and light sensitivity (photophobia).

How does this colour blindness simulator work?▼

The simulator applies Machado-Oliveira-Fernandes (2009) colour transformation matrices to each pixel of your image using the HTML Canvas API. The severity slider interpolates between original and simulated colours. All processing runs in your browser - your images are never uploaded to any server.

Why should designers test for colour blindness?▼

Approximately 1 in 12 men have some form of CVD. WCAG 2.1 SC 1.4.1 requires colour not be the sole means of conveying information. Designs using only red/green for error/success states, or colour-only chart legends, will fail for colour blind users. This simulator identifies these issues before publishing.

What is the severity slider?▼

The severity slider simulates partial CVD at any level from 0% (normal) to 100% (complete deficiency). Many people have partial anomalous trichromacy - their cones work but with reduced sensitivity. Setting severity to 30-70% simulates these intermediate conditions, which are actually more common than complete deficiencies. This feature is absent on most free colour blindness simulators.

Related tools