Which CVD type should I prioritise?

Deuteranomaly (mild red-green) is by far the most common — affects ~6% of men. Check that your traffic-light icons and error states are still distinguishable under it. The rare achromatopsia (total color blindness) is a good worst-case test.

Does my whole UI need to pass?

No, just any state where color is the only differentiator. Pair color with text labels, icons, or patterns and you've largely solved CVD accessibility.

Are the simulations accurate?

Approximate. They use the Brettel/Viénot algorithm, which is the academic standard but doesn't perfectly model individual differences. Use the simulation as a check, not a substitute for testing with actual CVD users.

Is my image uploaded anywhere?

No — the simulation runs in your browser via canvas. Internal mockups stay private.

cvd · 8 deficiencies · brettel · live · local

Simulate color blindness on any palette

Preview your design under eight color vision deficiencies — protanopia, deuteranopia, tritanopia and their anomalies plus full achromatopsia. Spot which swatches collapse.

Color Blindness Simulator

Colors

in palette

Deficiencies

compared

Population

~4%

global avg

Status

ready

live

input · hex palette

Palette (one HEX per line)

output · cvd previews

Normal

Protanopia

Protanomaly

Deuteranopia

Deuteranomaly

Tritanopia

Tritanomaly

Achromatopsia

Quick Start

How to audit a palette for CVD

Color vision deficiencies remap how a viewer sees red/green or blue/yellow. Comparing the original palette with each simulation reveals swatches that collapse into one.

01
Paste a palette
One HEX per line — your brand, chart, or status colors.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
input · colorhex list · sRGB
```
#ef4444
#22c55e
```
loaded · normalisedOKLCH · ready
02
Scan deficiencies
Compare normal vs each simulation. Watch for two swatches becoming the same shade.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
scanhex · rgb · hslP3gamut-mappedlive
compare · options8 rows · live
```
protan / deutan / tritan
```
options applied · livelive
03
Fix collisions
If red and green merge for deuteranopia, add a second cue (icon, shape, label).
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
fixWCAG 2.2APCAAA · AAAcontrast
cue · convertedicon + color · ready
```
✓ shape · ✓ text
```
converted · liveWCAG-aware
04
Ship inclusive
A palette that survives CVD is more legible for everyone.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copieda11y · done
```
inclusive
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to simulate color blindness

Essential for data viz and status UI.

Charts & graphs

Make categorical series distinguishable for everyone. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Status indicators

Red/green pass/fail is the classic CVD pitfall. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Maps & wayfinding

Subway maps, signage and dashboards rely on hue. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Code highlighting

Diff and lint colors that collapse in deuteranopia. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Accessibility audits

Add CVD checks to your pre-launch review. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Inclusive design

1 in 12 men has a CVD — design for them by default. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

a11y

FAQ

Frequently asked questions

Which simulations are included?

Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly and Achromatopsia — plus the unmodified Normal row.

Where do the matrices come from?

Brettel/Vienot/Mollon RGB matrices — the standard approximation used by every CVD simulator.

Are these exact?

They're a perceptual approximation. They illustrate which swatches collide; they don't replace user testing.

What if two swatches look the same?

Add a non-color cue — a shape, icon, label or pattern — to convey the same information.

Is anything uploaded?

No — the simulator runs locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!