See a design through colour-blind eyes

One man in twelve cannot separate red from green. A chart that relies on hue alone is unreadable for them, and a simulator is how you notice before they do.

How Colour Blindness Simulator works

Colours, gradients and spacing are converted into CSS text you can copy. The page never renders your design on anyone else's screen. Paste the values into your own stylesheet and the result is byte-identical to what the preview showed.

That is the whole architecture: static files, one script, no upload endpoint to leak or log. Close the tab and the work is gone.

Good to know

Works offline once loaded, including on flights and in locked-down networks.
No file size limit beyond your device's own memory.
Free to use, with no account and no usage counter.
Results are produced locally, so they are not logged or shared with anyone.

Questions

How accurate is the simulation?

It applies the widely used Brettel-style matrices for dichromacy. That is a good approximation of severe red-green or blue-yellow deficiency, not a diagnosis and not a model of the milder anomalous forms.

Which type is most common?

Deuteranomaly and deuteranopia — the green-sensitive cone — affect roughly 6% of men and 0.4% of women. Protan comes second, tritan is rare.

What should I change if my chart fails?

Add a second channel: different shapes, direct labels, or a lightness ramp. Hue alone is never sufficient.

Is my screenshot uploaded?

No. The matrix is applied per pixel on a canvas in the tab.

Keep going