Simulator barvne slepote

Preview your work through colour-blind eyes

This color blindness simulator re-renders any image to approximate how it looks to someone with a colour vision deficiency. Upload a screenshot, chart, map or photo — or use the built-in samples — and switch between protanopia, deuteranopia, tritanopia and full colour blindness to instantly see where your design leans too hard on colour alone.

Unlike a browser extension that only tints the current page, this online color blindness simulator works on the actual pixels of an image you choose, your pasted clipboard, or a live webcam feed — and it keeps the full native resolution, so you can download the simulated result at the same quality you put in.

Machado-accurate, with a severity slider

Most free simulators only show the full dichromat (100%) forms, which exaggerates how most colour-blind people actually see. This tool uses the Machado, Oliveira & Fernandes (2009) physiological matrices — the same model Chrome DevTools uses — and adds a 0–100% severity slider so you can preview anomalous trichromacy too. Deuteranomaly, the most common type, is realistically previewed around 40–60%, while 100% gives you the rarer full deuteranopia.

Eight types are covered in all: protanomaly and protanopia, deuteranomaly and deuteranopia, tritanomaly and tritanopia, achromatopsia, and blue-cone monochromacy — answering the common search for the '7 types of color blindness' and then some.

Compare, correct and inspect

Four view modes make problems obvious. Single shows one type full-screen; the split-compare slider wipes between the original and the simulation; the all-types grid renders every CVD type from one upload at once; and live webcam simulates your camera feed in real time. Hover the image to use the built-in eyedropper and read the original versus simulated colour of any pixel.

Toggle Daltonize to preview a CVD-corrected version of the image, where colours that would normally collapse are nudged apart into channels a colour-blind viewer can still distinguish — a feature most free simulators don't offer.

Check a colour palette for safety

Designers don't always have a screenshot ready, so the built-in palette checker lets you paste hex codes (for example #e11d48 and #16a34a) and see each swatch side by side under normal vision and every CVD type. If your 'error red' and 'success green' turn into the same muddy tone for a deuteranope, you'll see it immediately — and know to add an icon or label.

It's the fastest way to answer 'is my palette color blind friendly?' without leaving the page or installing anything.

Private by design — nothing is uploaded

Every transformation runs locally on an HTML canvas, so your image, palette and webcam stream never leave your device. There is no server, no account and no file-size cap from us. That's a deliberate contrast with simulators that upload your file or shrink it to 800px before processing — your unreleased mockups stay yours.

Use it as a quick color vision deficiency sanity check before you ship: run charts, dashboards, infographics, traffic-light states and brand palettes through the common red-green types, fix anything that relies on hue alone, and ship something roughly 1 in 12 men can actually read.

How this compares to Coblis, Color Oracle, and DaltonLens

Coblis (coblis.com) is the most well-known free color blindness simulator. It works by uploading your image to an external server, which is a privacy risk for unreleased UI designs and photography. It also lacks a severity slider — you can only see the full 100% dichromat version. Color Oracle is a free desktop application for Windows and Mac that overlays color blindness simulation on your entire screen, but it requires software installation, doesn't work on mobile, and can't simulate anomalous trichromacy (partial severity). DaltonLens (daltonlens.org) offers a Python library and a browser tool — excellent for researchers, but technical and less suitable for designers who want a quick visual check.

This tool addresses all three gaps: zero server upload (canvas-local), 0–100% severity slider for realistic anomalous trichromacy simulation, no installation required, works on any device including iPhone and Android, and adds daltonization output and a palette checker in the same page. All these features are free with no account required — something that sets UtiloKit apart from accessibility platforms that charge for full CVD simulation suites.

A guide, not a diagnosis

These simulations model the average appearance of each deficiency; real colour vision varies from person to person, and a simulator can never reproduce exactly what an individual sees. It is a design and accessibility tool, not a medical device — if you want to test your own vision, see an eye-care professional for a proper colour vision assessment such as an Ishihara or anomaloscope test.

The biology of colour vision: cones, ratios and what actually breaks

Human colour vision depends on three classes of photoreceptors in the retina, each tuned to a different part of the visible spectrum. S-cones (short wavelength) peak around 420 nm — what we loosely call blue. M-cones (medium wavelength) peak at roughly 530 nm — green. L-cones (long wavelength) peak near 560 nm — red. Critically, colour perception is not about absolute signals from a single cone type; it is the ratio of stimulation across all three that the visual cortex interprets as a hue. A pure 560 nm light fires L-cones more than M-cones, and barely touches S-cones at all — that ratio registers as red. Change the ratio by adding another wavelength and the brain sees a different colour, even if the total brightness is identical.

This ratio-based system is also why colour vision deficiency is so specifically disruptive. Monochromacy — only one functional cone type, or none — produces total colour blindness because there is no ratio to compute; brightness is all that remains. It affects around 1 in 30,000 people and is often accompanied by severe light sensitivity and reduced acuity. Dichromacy is the loss of one full cone class, leaving two intact — the brain still has a ratio but it is one-dimensional instead of two-dimensional, collapsing a rich colour space into a single line of confusable hues. Anomalous trichromacy is the most common form of all: all three cone types are present, but one has a shifted peak sensitivity, so the ratio still works but with reduced separation between two axes — colours close to the shifted cone's axis become hard to distinguish.

The practical implication for design is that colour confusion is not random noise. Each deficiency type causes confusion along a specific axis of hue space. Protan and deutan deficiencies collapse the red-green axis; tritan deficiencies collapse the blue-yellow axis. Colours that lie far from those axes — a high-contrast navy-on-white combination, for instance — remain perfectly visible to virtually every user regardless of CVD type.

Types of colour vision deficiency in detail

Protanopia is the complete absence of L-cones. Because L-cones normally contribute to perceived brightness as well as hue, reds appear not only similarly hued to greens but also significantly darker — a red warning icon on a dark background can become nearly invisible. Protanomaly is the partial form (shifted rather than absent L-cones) and affects roughly 1% of males; the confusion is similar to protanopia but milder. Deuteranopia — missing M-cones — is the most common dichromatic form, affecting around 1% of males; reds, oranges, greens and browns all collapse toward a muddy yellow-khaki, but brightness is less affected than in protanopia because M-cones contribute less to luminance perception. Deuteranomaly (shifted M-cones) is the single most prevalent type, affecting approximately 5–6% of males: the colour space is compressed rather than halved, so distinction is possible but unreliable under low contrast or small size.

Tritanopia — missing S-cones — causes blue-yellow confusion: blues shift toward greens, yellows toward pinks or greys. It is not sex-linked, affects males and females equally, and is rare at roughly 1 in 10,000. Tritanomaly is the partial form. Both tritan types are also associated with ageing (the lens yellows, absorbing short wavelengths) and with certain drug side effects, meaning they can be acquired rather than inherited — a point often missed in accessibility discussions. Achromatopsia (rod monochromacy) is the most severe form: the cone system is largely non-functional, leaving vision in shades of grey with significant photophobia and reduced acuity. Blue-cone monochromacy is a closely related X-linked near-total form where only S-cones function at all; it is rarer still.

Understanding the specific types matters for design decisions. Red-green failures (protan and deutan) affect roughly 1 in 12 men, making them the dominant accessibility concern. Tritan failures affect far fewer people but are worth simulating for data-heavy dashboards that use blue/yellow as a primary data pair. Achromatopsia affects an extreme minority but is severe enough to warrant consideration in any accessibility audit.

Genetics and epidemiology: why men are far more affected

The genes encoding L-opsin and M-opsin — the photopigments of the L- and M-cones — sit on the X chromosome. Because males carry only one X chromosome (XY), a single defective copy of either opsin gene is sufficient to cause red-green colour blindness. Females (XX) need defective copies on both X chromosomes, making them carriers far more often than they are affected. The result is a stark epidemiological asymmetry: approximately 8% of males and only 0.5% of females in populations of European descent have some form of red-green CVD — roughly a 16:1 ratio. Rates are somewhat lower in African and East Asian populations, likely due to differences in the historical frequency of opsin gene variants. Tritan deficiencies, by contrast, are autosomal (chromosome 7) and affect males and females at nearly equal rates.

Acquired colour vision deficiency adds another dimension. Optic neuritis, glaucoma, and diabetic retinopathy can all degrade colour discrimination, as can some medications — including certain antihistamines, sildenafil (erectile dysfunction drugs affect the phosphodiesterase pathway in cones), and ethambutol (used to treat tuberculosis). This means colour blindness is not a fixed trait confined to a genetic minority; it is a spectrum that widens with age and illness. Designing for colour blindness therefore also serves elderly users whose lens yellowing reduces short-wavelength transmission, and any user on relevant medications.

A handful of well-known people have disclosed colour vision deficiency, which helps dispel the stereotype of colour blindness as a severe impairment: Mark Zuckerberg is reported to have deuteranopia (the reason Facebook's palette is heavily blue), John Legend has discussed his colour blindness publicly, and historical figures including Mark Twain and Paul Newman are believed to have had CVD. The overwhelming majority of people with colour blindness live and work without significant limitation — the primary problems arise when interfaces, charts or safety systems are designed without considering them.

Designing for colour vision deficiency: rules, palettes and WCAG

The fundamental principle of accessible colour design is simple: never rely on colour alone to convey information. Any meaning encoded purely in hue — a red error badge vs. a green success badge, a chart with only colour-coded lines, a map with only colour-coded regions — becomes ambiguous or invisible to a significant portion of your audience. The fix is always to add a secondary channel: shape, pattern, label, icon or texture. A success state communicates reliably when it carries both a green colour and a check-mark icon; a line chart communicates reliably when each series uses both a distinct colour and a distinct line style (solid, dashed, dotted) or marker shape (circle, square, triangle).

The worst colour pair in interface design is red and green used as opposing states — success/error, pass/fail, go/stop — because it maps directly onto the protan and deutan confusion axis affecting 8% of male users. Orange-versus-blue or magenta-versus-teal are safer substitutes. For data visualisation, the Okabe-Ito palette — developed specifically for scientific figures — uses eight colours that remain distinguishable under protanopia, deuteranopia and tritanopia simultaneously: black, orange (#E69F00), sky blue (#56B4E9), bluish green (#009E73), yellow (#F0E442), blue (#0072B2), vermilion (#D55E00) and reddish purple (#CC79A7). Tableau's colorblind palette and IBM's Design Language palette follow similar principles.

WCAG 1.4.1 — Use of Color (Level A, the minimum compliance level) explicitly states that colour must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This is a hard requirement for any publicly accessible website or application, not a best-practice suggestion. Pair it with WCAG 1.4.3 (contrast ratio ≥ 4.5:1 for normal text) and you cover both the colour-encoding and the luminance-contrast axes of colour accessibility. Running your UI through this simulator before release is the fastest way to catch 1.4.1 failures that automated contrast checkers cannot detect — because contrast checkers measure luminance difference, not hue confusion.