Are these scientifically accurate?

They're approximations based on widely-cited linear RGB transforms (Brettel / Viénot / Mollon style). Real human vision varies; treat the previews as 'how this might look', not exact.

Which types affect the most people?

Deuteranomaly (mild green weakness) is by far the most common — about 5% of men. Protanomaly and protan/deutan dichromacy together account for most CVD.

What's achromatopsia?

Complete color blindness — the world is seen in shades of gray. Very rare, but a good worst-case check: if the design still works in pure grayscale, it'll work for everyone.

Why is my image uploaded?

It isn't — the simulation runs locally with Canvas. The image and the matrices both stay in your browser.

Color Blindness Simulator

Drop a screenshot of a chart, dashboard, or design and switch between 8 simulated views: normal, three full-color blindness types (protanopia, deuteranopia, tritanopia), three partial color-weakness types (protanomaly, deuteranomaly, tritanomaly), and full monochrome (achromatopsia). Each is rendered by applying the corresponding linear transform per pixel via Canvas — fast, fully offline. Useful for sanity-checking charts and palettes before shipping.

—

Drop an image hereor click to choose

Vision type

About the simulation

Color blindness simulation uses linear RGB transforms (Brettel/Viénot-style matrices). It's an approximation of how the image might appear, not a clinical replica. Always validate critical accessibility decisions with real users or formal contrast tooling like WCAG checkers.

How to use

Drop a screenshot of a chart, palette, or design.
Click each chip to see the image rendered for that vision type.
Download a copy of the current simulation to share with the team.

Frequently asked questions

Are these scientifically accurate?: They're approximations based on widely-cited linear RGB transforms (Brettel / Viénot / Mollon style). Real human vision varies; treat the previews as 'how this might look', not exact.
Which types affect the most people?: Deuteranomaly (mild green weakness) is by far the most common — about 5% of men. Protanomaly and protan/deutan dichromacy together account for most CVD.
What's achromatopsia?: Complete color blindness — the world is seen in shades of gray. Very rare, but a good worst-case check: if the design still works in pure grayscale, it'll work for everyone.
Why is my image uploaded?: It isn't — the simulation runs locally with Canvas. The image and the matrices both stay in your browser.

Guides on this topic

Colour Contrast and Accessible Palettes What the WCAG contrast ratios actually measure, why a colour that looks fine can still fail, how colour blindness changes the picture, and how to build a palette that holds up.

Related tools

Color Palette from Image

Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.

Color 0 0

Color Token Exporter

Define a color palette once, export to CSS custom properties, Tailwind config, SCSS, LESS, design-token JSON, SwiftUI Color, or Android `colors.xml`. Live preview swatches.

Color 0 0

Color Contrast Checker

Check text/background contrast against WCAG AA and AAA levels.

Color 0 0

Color Palette Generator

Pick a base color, get classic color-wheel harmonies — complementary, split-complementary, triadic, tetradic, square, analogous, monochromatic.

Color 0 0

CSS Named Colors

All 147 CSS / X11 named colors with HEX, RGB, and a live swatch — searchable and grouped by hue.

Color 0 0

Tailwind Color Palette

The full Tailwind CSS default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().

Color 0 0