Accessible design

Color Blindness Color Vision Simulation Tool

Examine images and color chips against eight common models to identify information that may be lost when relying on color alone.

test material

All pixels are processed natively in Canvas, and the image never leaves your device.

Simulation type

Original / Simulated

Original picture
Simulation screen

Accessibility suggestions

Color vision differences and website accessibility design

Color vision differences are not a single condition. The Protan type mainly affects red perception, the Deutan type mainly affects green perception, and the Tritan type affects blue-yellow recognition; Achromatopsia and Achromatomaly can greatly reduce or remove chroma. Simulation tools use color matrices to approximate possible visual outcomes, which are good for identifying risks during the design phase, but cannot represent how each person will truly feel or what a medical diagnosis will be.

A reliable interface can't just distinguish success from failure in red and green. Please include text labels, icons, line styles, textures, or positional differences, and make sure focus, hover, and chart legends are still understandable. The text and background also need to pass the WCAG contrast check; "simulation can be seen" does not mean that the contrast meets the standard.

Recommended inspection process

  1. Start by quickly scanning brand images, charts, and button states in side-by-side mode.
  2. Switch between the eight models and find the boundaries where the colors merge and disappear.
  3. Add non-color prompts to key states and resimulate.
  4. Verification is completed with actual user testing and contrast checks.

Frequently Asked Questions

Is this a medical diagnostic tool?
No. It only uses a color matrix to assist in design checking and cannot diagnose an individual's color vision status.
Which color vision differences are most common?
Differences in red and green vision are more common, but products should still consider both the less common blue and yellow vision and low chroma situations.
Why can't we just use red and green?
It may be difficult for some users to distinguish, so text, icons or shapes should be added at the same time to make the information independent of hue.
Will my images be uploaded?
No, both File API and Canvas are executed locally in the browser.
Does passing the simulation equal WCAG compliance?
Not equal to. Also check text contrast, keyboarding, semantic structure, alt text, and other success criteria.