About 8% of men and 0.5% of women have some form of color vision deficiency. That's approximately 1 in 12 male users of your app who may not see your UI the way you intended — and most of them have no idea your design is failing them, because the failure is invisible to you.
What Color Blindness Actually Is
Color vision works through three types of cone photoreceptors in the retina, each sensitive to a different range of wavelengths. The three cone types are designated by the peak wavelength they respond to:
- L-cones — sensitive to long wavelengths (red region, ~560 nm)
- M-cones — sensitive to medium wavelengths (green region, ~530 nm)
- S-cones — sensitive to short wavelengths (blue region, ~420 nm)
Normal trichromatic vision uses all three cone types in combination. The brain compares signals across the three channels to construct the full range of color perception. Remove or shift one channel, and the comparison breaks down in a specific, predictable way.
"Color blindness" is a misnomer for almost everyone it describes. The vast majority of people with color vision deficiency still see color — they just see a reduced gamut, or they confuse pairs of colors that appear clearly distinct to trichromats. Only achromatopsia, the complete absence of functional cone cells, produces genuinely colorless, grayscale vision. It is also by far the rarest form.
There are two structural categories of color vision deficiency:
Dichromacy — one cone type is absent entirely. The affected channel drops out completely, and color perception collapses from three dimensions to two. Protanopia (no L-cones) and deuteranopia (no M-cones) are the dichromatic forms of red-green deficiency. Tritanopia (no S-cones) is the dichromatic form of blue-yellow deficiency.
Anomalous trichromacy — all three cone types are present, but one type has a shifted spectral sensitivity peak. The affected cones respond to a slightly different wavelength than normal, reducing the perceptual distance between adjacent color channels. The result is a partial, not total, loss of color discrimination. Protanomaly, deuteranomaly, and tritanomaly are the anomalous trichromat forms.
The distinction matters for design: dichromats face the sharpest color confusion because an entire channel is missing. Anomalous trichromats vary widely in severity — some have near-normal discrimination, others approach the dichromatic range. You cannot assume mild anomalous trichromacy means "almost normal."
The 8 Types of Color Vision Deficiency
| Type | Cones Affected | Male Prevalence | Category | What Changes |
|---|---|---|---|---|
| Normal Vision | All intact | — | Trichromacy | Full color range |
| Deuteranomaly | Shifted M-cones | ~5% | Anomalous trichromacy | Reduced red-green discrimination; greens shift toward red |
| Deuteranopia | No M-cones | ~1% | Dichromacy | Reds and greens merge to brownish-yellow; no green channel |
| Protanomaly | Shifted L-cones | ~1% | Anomalous trichromacy | Reds appear darker and desaturated; reduced red-green range |
| Protanopia | No L-cones | ~1% | Dichromacy | Reds appear very dark; no red channel; greens and reds merge |
| Tritanomaly | Shifted S-cones | <0.01% | Anomalous trichromacy | Blues and greens harder to distinguish; yellows look reddish |
| Tritanopia | No S-cones | <0.01% | Dichromacy | Blues become greens; yellows become pink/red; no blue channel |
| Achromatopsia | No cone function | ~0.003% | Rod monochromacy | Complete grayscale; severe light sensitivity |
Prevalence figures for red-green deficiencies follow X-linked recessive inheritance — which explains why they affect roughly 8% of men (one defective X chromosome out of one is sufficient) but only 0.5% of women (both X chromosomes must carry the defective gene). Tritanopia and achromatopsia are autosomal, so they affect men and women equally.
Red-Green Color Blindness: The Most Common Type
Red-green deficiency is the umbrella term for deuteranomaly, deuteranopia, protanomaly, and protanopia combined. Together they affect approximately 8% of men — the single largest category of color vision deficiency.
Deuteranomaly and deuteranopia involve the M (green) cone system. Deuteranomaly is the most common form of all color vision deficiency: roughly 5% of men have it. Greens shift toward red in perception; the saturated red-green distinction collapses into a range of brownish-yellows and olives. A typical "bright green success" badge and a "vivid red error" badge may appear as two slightly different shades of the same muddy yellow.
Protanomaly and protanopia involve the L (red) cone system. Reds become darker and lose saturation — protanopia causes reds to appear nearly black at low luminance. The color confusion is similar to deuteranomaly in terms of which pairs merge, but with an added luminance component: red objects look dimmer to protanopes than they do to trichromats, which means a red warning label loses both its hue and its apparent brightness.
Traffic lights remain usable for most red-green deficient people. This is often cited as evidence that color blindness is "not really a problem," but the reason traffic lights work is that they encode redundancy beyond color: position (red top, green bottom in vertical lights), brightness difference (red is often brighter than green), and shape in some jurisdictions. Traffic lights are a case study in exactly the kind of accessible design we should be applying to software.
Blue-Yellow Color Blindness (Tritanopia and Tritanomaly)
Tritanopia and tritanomaly involve the S (short-wavelength, blue) cone system. They are rare — under 0.01% of the population — and unlike red-green deficiencies, they affect men and women equally, since the gene responsible (OPN1SW) is located on chromosome 7, not the X chromosome.
S-cone deficiency produces a characteristic blue-green confusion and a yellow-violet confusion:
- Blues shift toward green. A saturated sky blue and a medium green may appear as variants of the same color.
- Yellows shift toward pink or red. Bright yellows become difficult to distinguish from certain reds or pinks.
- Violet and purple appear as shades of red. The blue component that distinguishes purple from red disappears.
This has direct implications for UI design. Warning systems that use yellow as a secondary status color (alongside red for error, green for success) are not safe for tritanopes — yellow and red become hard to separate. Charts that distinguish data series with blue-violet and blue-green are another common failure point.
Tritanomaly and tritanopia are also worth testing specifically because many design accessibility audits focus exclusively on red-green. A design reviewed under deuteranopia and protanopia simulations may still have serious tritanopia failures.
Complete Color Blindness (Achromatopsia)
Achromatopsia is the only form of color blindness that truly produces grayscale vision. It affects approximately 1 in 30,000 people — roughly 0.003% — making it the rarest form covered by the simulator.
In achromatopsia, no cone photoreceptors are functional. Vision relies entirely on rod cells, which are monochromatic (they respond to luminance only) and are not adapted for high-light conditions. This produces two consequences beyond colorlessness:
- Monochromatic vision — all color information is absent. What the eye reports is purely a luminance map.
- Photophobia — severe light sensitivity, because rod cells saturate quickly under bright light. Many people with achromatopsia wear dark tinted lenses indoors.
The simulation uses the standard luminance-weighted grayscale conversion: 0.299R + 0.587G + 0.114B. These weights reflect the relative luminance sensitivity of the human visual system — the eye is most sensitive to green wavelengths, moderately sensitive to red, and least sensitive to blue. Pure red #ff0000 simulates to about 30% gray. Pure green #00ff00 simulates to about 59% gray. Pure blue #0000ff simulates to about 11% gray.
The practical design implication: under achromatopsia, your color-coded UI becomes a grayscale image. If colors in that image have similar luminance values, they become indistinguishable. A red error and a green success at similar brightness both reduce to nearly the same medium gray.
How the Simulation Works
The simulator is built on the Brettel, Viénot, and Mollon (1997) model, which remains the standard academic reference for dichromacy simulation. Published in the Journal of the Optical Society of America, the model defines the color confusion hyperplanes for protanopia and deuteranopia based on measured physiological data from dichromats. The Viénot extension covers anomalous trichromacy by interpolating between the dichromat transform and the identity transform.
The simulation process per pixel:
Linearize RGB — convert gamma-encoded sRGB values to linear light by applying the sRGB inverse gamma function. This is necessary because the color matrices operate in linear RGB space, not the gamma-corrected values stored in images.
Apply the color matrix — multiply the linear RGB values by a 3×3 transformation matrix specific to the deficiency being simulated. The matrix for deuteranopia, for example, projects the M-cone response onto the remaining L and S channels, producing the characteristic red-green merge.
Re-encode to sRGB — convert back to gamma-corrected values for display.
All processing runs entirely in the browser using the Canvas API. The image never leaves your device — there is no upload, no server, no storage. You can test confidential design work or unreleased screenshots without any privacy risk.
The achromatopsia path is a separate, simpler calculation: apply the luminance weights directly in linear space (0.299R + 0.587G + 0.114B) and assign the result to all three channels, then re-encode.
What to Look for When You Test
Running the simulator without knowing what to look for is easy. Knowing what constitutes a failure requires pattern recognition. Here are the five most common design failures that color blindness simulation reveals:
Status and alert colors using hue alone
Red/green pairs are the most common failure. Under deuteranopia and protanopia, a red error state and a green success state converge to a very similar brownish-yellow. If the only indicator of state is the background or border color, the meaning disappears. Fix: add an icon (error icon for failure, checkmark for success) and a text label ("Error", "Success") that communicate state without relying on hue.
Charts comparing series with red and green
A bar chart or line chart that distinguishes two series using red and green is unreadable under red-green simulation — both series appear in the same muddy range. Fix: use blue/orange as your primary two-series palette. Blue and orange are perceptually distinct under protanopia and deuteranopia because the separation survives the L/M-cone merge. Adding pattern fills (solid vs. hatched) provides a third redundancy channel.
Form error states with no secondary indicator
Red input borders without an error icon or error text label are invisible under protanopia (red becomes very dark gray, easy to miss) and deuteranopia (red border blends toward neutral). Fix: pair the red border with aria-invalid="true", an inline error message, and an error icon adjacent to the field.
Heatmaps using the default red-yellow-green spectrum
Thermal/rainbow heatmaps are one of the most commonly cited data visualization failures for red-green deficiency. Under deuteranopia, the red-to-green gradient compresses dramatically — different data regions become nearly indistinguishable. Fix: use perceptually uniform sequential palettes. Viridis and Cividis are the most widely recommended because they maintain distinguishable value ranges under all simulated deficiency types, and they were specifically designed with color vision deficiency in mind.
Links that differ from body text only by hue
A blue link on dark gray body text may pass contrast checks on its own, but under tritanopia or deuteranopia, a blue that has been lightened to match the text luminance becomes very hard to distinguish from surrounding text. Fix: add an underline to links. The underline is a redundant visual indicator that survives all color vision deficiency types.
How to Use the Color Blindness Simulator
The tool is designed to give you a comparison in under thirty seconds. Here's the workflow:
Load an image. Click "Upload Image" to load a PNG, JPG, WebP, GIF, or SVG from your device. If you want to try the tool before uploading anything, use the "Color Wheel" or "Gradient Grid" built-in demos — the color wheel is particularly effective for seeing which hue ranges merge under each deficiency type.
Select a vision mode. The mode selector lists all 8 types. The default is deuteranomaly — the most common deficiency type, affecting ~5% of men — which makes it the most useful starting point for most design audits. Switch to deuteranopia for the full dichromat view of the same deficiency. Then repeat for protanopia.
Drag the split handle. The view is split into original (left) and simulated (right) with a draggable divider. Move the handle across your image to compare specific areas side by side. A UI element that looks fine in isolation may reveal a problem when you see it adjacent to its simulated version.
Look for problem areas. Check any place where color is used to communicate state, distinguish categories, or draw attention. Does the simulated version still convey the same information? Can you tell errors from successes? Can you separate data series in charts?
Export the result. Click "Export PNG" to save a 2× supersampled comparison image with a branded footer for your design review file or Jira ticket. The export shows both the original and simulated views side by side.
Check contrast. Once you've identified the color pairs in your design, go to the Color Contrast Checker to verify those pairs meet WCAG AA (4.5:1 for normal text, 3:1 for large text). High contrast ratios help most color vision deficiency types because they increase the luminance separation between elements, which survives even significant hue perception loss.
For background on building accessible palettes that work across all deficiency types, see Accessible Color Palettes.
Designing for Color Blindness: The 5 Rules
1. Never use color as the only differentiator
Every piece of information conveyed by color must also be conveyed by at least one other channel: text, icon, position, shape, pattern, or label. This is WCAG Success Criterion 1.4.1 (Use of Color). It is not a "nice to have" — it is a Level A requirement, the most critical compliance level.
2. Test with both protanopia and deuteranopia
The two most common red-green deficiencies produce subtly different failure patterns. Protanopia adds a luminance effect (reds appear darker); deuteranopia does not. A design that passes under one may still fail under the other. Testing both takes thirty seconds with the simulator.
3. Prefer blue/orange over red/green for data visualization
Blue-orange is the single most reliable two-category palette for color vision accessibility. Blue is perceived robustly by all red-green deficient viewers because it maps to the S-cone channel, which is intact in protanopia and deuteranopia. Orange (as a yellow-red mixture) retains a distinct luminance profile from blue under all red-green simulation modes. This combination is standard in accessible dataviz style guides including the UK Government Design System and the BBC Visual and Data Journalism guidelines.
4. Add texture, pattern, or icon as a secondary signal
Redundancy is the design principle underlying color accessibility. Icon + color for status. Pattern + color for chart series. Underline + color for links. Shape + color for map regions. The secondary signal doesn't have to be prominent — it just has to exist. For users with severe achromatopsia, the secondary signal becomes the only signal.
5. Use WCAG contrast ratios — high contrast survives most CVD types
The luminance contrast between two colors is independent of hue. A red at #dc2626 and a white background have a contrast ratio of 4.5:1 — barely AA. Boosting to #991b1b (deep red) gives 6.2:1. The increase doesn't change the hue relationship, but the higher luminance gap means the color pair retains more perceptual separation even when hue discrimination is reduced. Contrast ratio is your last line of defense when all other color-based cues have been lost. For a complete reference on WCAG thresholds, see WCAG Color Contrast Explained.