Color Blindness Simulator

What is color blindness?

Color blindness — more accurately called color vision deficiency — is a genetic or acquired condition where one or more of the three cone-cell types in the retina is missing or has shifted sensitivity. About 1 in 12 men and 1 in 200 women see colors differently from the trichromatic majority, with red-green deficiencies being by far the most common. The eight conditions on this page cover the full clinical taxonomy: opias are the severe forms (a cone type is non-functional) and omalies are the milder, anomalous forms (a cone exists but its peak sensitivity is shifted).

How to use this simulator

Pick a color from your palette in the picker, or paste a hex code. The grid below shows how that single color is perceived by someone with each of the eight deficiencies — plus a baseline "normal vision" tile so you can compare. If two of your brand colors collapse into the same swatch under deuteranopia or protanopia, you have a real-world accessibility problem and should pair them with shape, label, or pattern cues.

Designing for color-vision deficiency

Never rely on color alone to convey state — pair red/green status indicators with icons (check, cross), labels, or position. Avoid red-on-green and orange-on-yellow combinations in charts; use blue-orange or purple-yellow pairs instead, which remain distinguishable across all common deficiencies. Test the full chart, not just one swatch — adjacent slices and lines need to differ in lightness as well as hue, since deuteranopes lose hue cues but keep lightness cues. For dataviz, palettes like viridis or cividis are designed to be perceptually uniform across all vision types.

How the simulation works

Each deficiency is modeled as a 3×3 linear transformation in linear-light RGB space, derived from confusion-line projections in the LMS cone-response space (Brettel/Viénot 1997). The pipeline is: gamma-decode sRGB to linear RGB, multiply by the per-deficiency matrix, clamp to [0,1], then gamma-encode back to sRGB. Anomalous trichromacies (the omalies) are a 50% linear blend between the corresponding dichromacy and the identity matrix — a simple but widely used approximation for partial cone shift.

How common is each type?

Deuteranomaly is the most common (~5% of men of European descent), followed by protanomaly (~1%), then deuteranopia and protanopia (~1% each). Tritan conditions affect blue-yellow vision and are very rare (under 0.01%) and equally distributed between sexes because the gene is autosomal. Achromatopsia — true monochromacy — affects roughly 1 in 30,000 people. Combined, red-green deficiencies account for over 99% of all color vision differences.

Frequently asked questions

How accurate are these simulations?

Accurate enough to catch most accessibility issues. The matrices come from peer-reviewed vision-science models (Brettel & Viénot, 1997) that have been the de-facto standard for two decades. They're not a substitute for testing with real users, but they reliably surface the cases where two colors collapse into one — which is what 99% of design audits care about.

Why do dark colors look almost identical across all types?

Cone cells need light to fire. Below a certain luminance threshold, even normal-vision retinas switch over to the achromatic rod system, which can't distinguish hue. Color-vision deficiencies effectively widen that threshold. If your design relies on hue distinctions in dim regions (low-saturation greys, dark navy vs dark teal), expect those distinctions to vanish for many viewers.

What's the difference between -opia and -omaly?

-opia means the cone type is absent or non-functional (dichromacy — only two working cone types remain). -omaly means the cone exists but its sensitivity peak is shifted, so the brain still gets a third channel of input, just a noisier one. Anomalies are milder, more common, and harder to self-diagnose because daily experience seems normal to those who have them.

Should I worry about tritanopia in my designs?

Statistically, no — it's vanishingly rare. But the same design fixes that solve red-green confusion (icons, labels, lightness contrast, blue-orange palettes) cover tritan cases for free, so building accessibility in from the start is cheaper than retrofitting.

Can I simulate a whole image, not just one color?

Not in this tool — it's a per-color preview optimised for palette and brand audits. For full-image simulation, browser extensions like Funkify or Chrome DevTools' rendering panel apply the same matrix transforms to entire pages.

Does the data leave my browser?

No. The matrices are baked into the page's JavaScript and every transformation runs locally — no analytics on which colors you tested, no external API calls. Drop your unreleased brand palette in without worry.

Color Blindness Simulator