Color Blindness Simulator for Accessible Design

This color blindness simulator shows how any color or set of colors appears to people with Deuteranopia, Protanopia, Tritanopia, and Achromatopsia, the four major types of color vision deficiency, so you can catch accessibility problems before shipping a design. It's an essential check for UI/UX designers choosing status colors, chart and data visualization creators picking distinguishable categories, and developers validating that critical information isn't conveyed by color alone. Enter or select your colors and the simulator transforms them to show approximately how each vision type perceives them, letting you compare the original and simulated versions side by side. Everything runs locally in your browser, so the colors and designs you're testing are never uploaded anywhere. The simulation uses established color vision deficiency transformation models, giving a scientifically grounded approximation rather than a rough guess, though it's still an approximation of real-world perception. Enter your colors below to see how they appear under each vision type.

Features

Simulates Deuteranopia (red-green, most common)
Simulates Protanopia (red-green)
Simulates Tritanopia (blue-yellow)
Simulates Achromatopsia (total color blindness)
Side-by-side original vs. simulated color comparison
Works with single colors or multi-color palettes
Live swatch previews for every simulation type
Uses established color vision deficiency transformation models

Why use this color blindness simulator?

Instant simulation across all four vision types at once
Fully client-side, keeping your design work private
Grounded in established scientific color vision models
Simple, visual side-by-side comparison
Completely free with unlimited testing

Frequently asked questions

What is the most common type of color blindness?

Deuteranopia (reduced sensitivity to green) is the most common form of red-green color blindness, affecting roughly 1% of men most significantly.

What's the difference between Protanopia and Deuteranopia?

Both affect red-green perception, but Protanopia involves reduced red-cone sensitivity while Deuteranopia involves reduced green-cone sensitivity - they produce similar but distinct color confusion patterns.

What is Achromatopsia?

Achromatopsia is a rare condition causing complete or near-complete inability to perceive color, resulting in a grayscale view of the world.

Why should I test my designs for color blindness?

An estimated 1 in 12 men and 1 in 200 women have some form of color vision deficiency, so designs that rely solely on color to convey meaning can be unusable for a meaningful share of users.

How can I make a design accessible for color blind users?

Pair color with other cues like icons, patterns, or text labels, and ensure sufficient contrast so information doesn't depend on color perception alone.

Is this simulator 100% accurate to real vision?

It's a scientifically grounded approximation based on established transformation models, but actual perception varies between individuals and can't be perfectly replicated on a standard screen.

From the blog

Why You Shouldn't Rely on Color Alone

WCAG 1.4.1 Use of Color is Level A. Exactly what color alone accessibility forbids, the four places designs break it, and non-color indicators that work.

Designing for Color Blindness: A Practical Guide

How deuteranopia, protanopia and tritanopia change what users see, which color pairs collapse, and how to build a colorblind-safe palette for charts, status and maps.

The Complete Guide to Accessible Color and Contrast

A complete guide to accessible color: WCAG 2.1 contrast ratios, how contrast is calculated, color blindness types, and practical fixes for failing palettes.