Color Blindness Simulator

About Color Blindness Simulator

Shows a palette the way it looks to people with each of the four main colour-vision deficiencies, and — more usefully — lists the pairs of colours that are distinct for typical vision but hard to tell apart for someone with one of them.

About one man in twelve and one woman in two hundred has some form of colour-vision deficiency, most often a reduced sensitivity to green (deuteranomaly). The classic failure is a red error state next to a green success state: to many readers those are the same muddy yellow-brown, and any meaning carried by the colour alone is lost.

The simulation uses the model of Machado, Oliveira and Fernandes (2009), the one most simulators and browser devtools use. Severity 100 is full dichromacy — a missing cone type; lower values approximate the milder anomalous forms, which are far more common.

Where it helps

• Simulates protanopia, deuteranopia, tritanopia and achromatopsia side by side.
• Flags the specific pairs that collapse, rather than leaving you to compare swatches by eye.
• Adjustable severity covers the common anomalous forms, not just full dichromacy.
• Accepts any CSS colours, one per line or comma-separated.

Limits

• A simulation shows lost contrast between colours; it is not what any individual actually experiences.
• Colour-vision deficiency varies from person to person — passing here is a strong signal, not a guarantee.
• Lightness differences survive all of these, so two colours can pass here and still fail text contrast; check that separately.

Frequently asked questions

How do I fix a red/green clash?

Do not rely on colour alone. Pair each state with an icon, a label, a pattern or a position. Changing the hues helps a little — a blue/orange pair is safer than red/green — but the redundant cue is what makes the palette work for everyone, as WCAG 1.4.1 requires.

Which deficiency should I design for?

Deuteranomaly and protanomaly between them cover most cases, so a palette that survives both at 60–100% severity is in good shape. Tritanopia is rare but inverts blue/yellow distinctions, so check it for charts.

Why do my colours still look fine to me in the simulated rows?

They may be distinct in lightness. Deficiencies remove hue information, not brightness, so colours that differ strongly in lightness stay separable — which is exactly why lightness is the most robust way to encode differences.

Related tools

• Contrast Checker — WCAG contrast ratio for text and UI colours
• Palette Generator — Harmonious colour schemes from a base colour
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Box Shadow Generator — Design a shadow, stack its layers and copy the CSS
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it