Skip to main content
Ink·tab
←all tools

CVD simulator

Compare a palette or image across four vision types (deutan · protan · tritan · achromat) at once.

Mode
Compare 6 colors across 4 vision types
Original
#3a4bd0
#2bb46c
#f59e0b
#ef4444
#8b5cf6
#f3f4f6
Deutan
#264dcc
#928a70
#dfaf0f
#837442
#4a70f1
#f3f4f6
Protan
#2d56d7
#ae9d69
#c99903
#5e5843
#4471fe
#f3f4f6
Tritan
#1e6073
#15b49d
#ff8172
#ff3745
#7b6f8b
#f2f4f5
Achromat
#555555
#838383
#a7a7a7
#777777
#7c7c7c
#f4f4f4

WCAG 1.4.1 — don't convey meaning by color alone. Use this tool to verify whether information disappears when only the color changes.

Everything happens in your browser. Nothing is uploaded.

When you'd use this

Right after settling on a design system palette, choosing categorical colors for a chart, or before shipping work that needs to meet WCAG / KWCAG 1.4.1. A pair that passes a contrast check can still look like the same grey to a deuteranope — meaning charts, buttons, and labels that rely on color alone fail to convey information.

Two modes

  • Palette — Paste one or many hex / rgb / oklch tokens (up to 24). Each color is shown side-by-side across four vision types. Drop the full color-palette 11-stop scale in to check if neighboring stops remain distinguishable.
  • Image — Upload a single JPG / PNG / WebP (up to 20MB). The original plus four simulated variants render side-by-side. Useful for charts, infographics, UI screenshots.

Four vision types

  • Deuteranopia (deutan) — M-cone loss, ~75% of red-green CVD
  • Protanopia (protan) — L-cone loss, ~1% of red-green CVD
  • Tritanopia (tritan) — S-cone loss, ~0.01% blue-yellow CVD
  • Achromatopsia — all cones lost, grayscale view

Anomalies (deuteranomaly, protanomaly) use the same matrices scaled by severity. This tool ships v1 with full anopia only.

Simulation model

Machado, Oliveira, Fernandes (2009) sRGB-to-sRGB matrices at severity 1.0. The matrix is applied directly to gamma-encoded sRGB rather than linear-RGB — that's about 3× faster and visually almost identical for preview purposes. Don't use this output for clinical assessment.

WCAG 1.4.1 — don't convey meaning by color alone

WCAG 2.1 (and KWCAG 2.2) section 1.4.1 requires that color is never the only means of identifying, distinguishing, or emphasizing information. If two stops collapse to the same shade in any of the four simulated views, add another cue — shape, text, pattern, or position.

Local processing

Image decoding uses createImageBitmap; simulation runs on Canvas getImageData with the matrix in code. All in the browser. No model download — the matrix coefficients ship with the bundle (zero added dependencies).

When this isn't the right tool

  • Medical assessment — this tool is design preview only. Use standardized clinical tests (Ishihara, etc.) for diagnosis.
  • Exact perception by an individual — simulations are models; individuals vary. Real user testing remains the gold standard.
  • HEIC (iPhone photos) — browsers can't decode HEIC. Export to JPG / PNG first.

Images and palettes stay local

Machado et al. 2009 matrix arithmetic — no external model, no server calls. Pixel processing uses Canvas getImageData; the simulated views render only in this page. No upload trace.

Frequently asked questions

What simulation model is used?
Machado, Oliveira, Fernandes (2009) sRGB-to-sRGB matrices at severity 1.0 (full anopia). For performance the matrix is applied directly to gamma-encoded sRGB rather than via linear-RGB — designer-preview consistency is the goal, not clinical accuracy. Don't use this for medical assessment.
Why only four types?
Deuteranopia (M-cone loss, ~75% of red-green CVD), protanopia (L-cone loss, ~1% of red-green CVD), tritanopia (S-cone loss, < 0.01% blue-yellow CVD), and achromatopsia (full color loss) are the most cited reference views in design accessibility checks. Partial deficiencies (deuteranomaly, protanomaly) use the same matrix scaled by severity and may land in v2.
How do I use this for design system review?
Paste a color-palette 11-stop scale or your design tokens into palette mode and check whether two stops remain distinguishable across the four views. Or test a contrast-passing pair to see if it collapses to a single grey under deuteranopia (sufficient contrast but lost color information). It's a quick check against WCAG 1.4.1 / KWCAG 1.4.1 ('don't use color alone to convey meaning').
Are images uploaded anywhere?
No. Decoding uses createImageBitmap and simulation runs on Canvas getImageData with the matrix in code — both fully in the browser. There's no model file to download either; the matrix coefficients ship inside the bundle (zero added dependencies).