ACCESSIBILITY LAB

Color vision simulator

Simulate common color-vision deficiencies on images and palettes to catch unsafe color pairs early.

Choose a CVD type, adjust severity, test an image or palette, then open the contrast checker for failing pairs.

Model: Machado et al. 2009 Machado et al. 2009 in linear sRGB. Severity mixes identity with the dichromat matrix (standard Machado severity). No model matches every person’s perception.

Simulation

Edit a palette, or upload a UI / chart screenshot. Processing stays in the browser.

Vision type

0–100% Machado severity. Anomaly modes start near 60%; dichromacy near 100%.

Add brand or UI colors. Confusing pairs are ranked by how much separation they lose.

Live comparison

Each swatch shows the original color and the simulated result.

All simulations

Click a type to compare it in the main preview at the current severity.

Do not rely on color alone

Even a safe palette fails if color is the only way to read the UI (WCAG 1.4.1).

  • Give chart series and status states their own labels.
  • Use dashed / dotted strokes or fills for categories.
  • Vary icons or markers per category.
  • Pair hue differences with lightness differences.

Related Nova Lab tools

Contrast checks readability; the palette lab builds and exports themes. This simulator checks color discrimination.

Open contrast checker → Open in palette lab →

How to use this test

Protanopia

Protanopia / protanomaly weaken red. Status reds, traffic lights, and error states are the first places to check.

Deuteranopia

Deuteranopia is the most common CVD. Green/red buttons and charts often collapse — never rely on color alone.

Tritanopia

Tritanopia is rarer and affects blue/yellow. Links, info chips, and gold-on-teal palettes need a second cue.

Grayscale

Achromatopsia is a grayscale check. Useful for lightness-only structure — not a full CVD model for everyone.

Go deeper

Why you’ll love this

Passing a contrast ratio is not enough if two hues collapse for people with CVD. This simulator shows how your palette and images actually shift.

How to jump in

  1. Add a palette or image

    Enter brand/UI colors or load an image for preview.

  2. Choose a CVD type

    Switch between protanopia, deuteranopia, tritanopia, and achromatopsia.

  3. Fix collapsing pairs

    Replace risky pairs with safer hues and reinforce meaning with shape or labels.

What you walk away with

  • Multiple CVD simulations
  • Confusing-pair warnings
  • Pairs well with the contrast checker
  • Useful for accessibility classes

Where it shines

Status colors

Do not rely on red/green alone for success and error states.

Charts and dashboards

Support series with patterns or labels, not hue alone.

Brand and games

Validate character and HUD palettes for CVD readability.

Quick answers

Which CVD type should I test first?

Deuteranopia is among the most common; it is a strong default check for UI.

Is this medically exact?

It is an educational/design approximation, not a medical diagnosis tool.

What if two colors look the same?

Separate hue, raise contrast, and carry meaning with icons or text as well.

You’ll probably want these too

◇ Product Design →
Accessibility contrast checker Measure text and background contrast against WCAG 2.2 — for readability tests on body copy, headings, and UI parts. Palette generator & color wheel Generate fast like Coolors, with harmony theory, design-system shades, accessibility checks, and real UI preview — without the clutter. Themed palettes Browse ready-made 4-color palettes by mood — or describe a project topic and let AI generate fresh themes.

All tools →