FIRST CH TOOLS LOCAL PROCESSING — your images never leave this device 日本語

FIRST CH TOOLS / Design / 60 COLORBLIND SIMULATOR

Color Blindness Simulator

Put a colour pair or an image side by side with how it looks under protanopia (P, type 1), deuteranopia (D, type 2) and tritanopia (T, type 3). When two colours become hard to tell apart, the tool says so and gives you the colour difference and contrast ratio. Images never leave your device.

CHECK A COLOUR PAIR

Check in the contrast tool — the WCAG 2.1 AA / AAA verdicts live there.

CHECK AN IMAGE

Drag & drop an image here or click to pick a file (PNG / JPEG / WebP / GIF / AVIF / SVG — pasting works too)

How to Use

  1. Enter two coloursUse the colour pickers or type HEX values (#e2453c). The “Common pairings” menu loads examples that go wrong in practice.
  2. Compare the four viewsNormal, P, D and T appear side by side. If a pair stops being distinguishable, the tool names the types where it happens.
  3. Try a real imageDrop a chart, map or UI screenshot to simulate the same three types, then save any panel as a PNG.

About This Tool

Around 8% of men and 0.4% of women of northern European descent — and about 5% of men in Japan — have red-green colour vision deficiency (protan, type 1, or deutan, type 2). Tritan (type 3, the blue-yellow axis) is very rare. At those rates a class of 40 contains at least one person, so a chart that marks pass and fail in red and green, or a UI that carries meaning in colour alone, is unreadable for a predictable share of your audience. This tool lets you see that while you are still designing.

The conversion uses the matrices from the physiological model of Machado, Oliveira & Fernandes (2009) (their published coefficient tables), applied exactly as given. Those matrices act on linear RGB, so the sRGB gamma is removed before the multiply and re-applied afterwards (skip that and dark colours lift into a different picture altogether). “Strength” 100% is dichromacy — the cone type is missing — while 70% and 40% stand for anomalous trichromacy, where the cone's sensitivity is shifted. It is an approximation for reviewing a design, not a window onto what any individual actually sees.

The colour difference in the verdict is the distance in OKLab multiplied by 100: below 5 the two colours look the same side by side, below 10 you hesitate. A contrast ratio of 3:1 or more keeps them apart by lightness, so pairs that clear it are not flagged even when the hue difference collapses — which is exactly the fix: carry the meaning in lightness, text or shape rather than hue. For the full AA / AAA verdicts see the contrast ratio checker; to pull colours out of an image use the palette extractor, and to convert a single value the color converter.

Images are drawn onto a canvas at up to 1600 px on the long edge and transformed pixel by pixel (the PNG you save is that size). Reading, converting and saving all happen in the browser, and nothing is uploaded. Colour pairs can also be passed in the URL, e.g. /en/colorblind/?c1=e2453c&c2=2fa14a&sev=100.

Other Tools