UUUP Tools

Design Tools

Color Blindness Simulator — Matrix Filter Preview

Apply color-vision deficiency matrices to a sample view so you can preview how protanopia, deuteranopia, tritanopia, or achromatopsia may change UI colors. Use it to catch contrast and status-color issues before shipping.

Quick switch→CSS Filter Generator
DesignUXAccessibility
Quick switch:CSS Filter Generator

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

  • Review whether red/green status colors remain distinguishable
  • Check charts and badges under common CVD types
  • Share a filter mode while auditing design guidelines

How to use

  1. Pick a preview sample and a simulation mode
  2. Compare against the normal (unfiltered) view
  3. Copy the filter snippet

Example input and output

Mode

Protanopia

Effect

Reds shift toward darker, less distinct tones

FAQ

How accurate is the simulation?

It uses published CVD transformation matrices as an approximation. Real perception varies by person and display.

Does it use CSS filter?

The simulation is driven by color-matrix style filters for the preview, not a casual hue rotate.

Tools

Related tools

Continue with another translated tool for a nearby task.

CSS Filter Generator

CSS Filter Generator — Live Image Effects

Available

Combine blur, grayscale, contrast, and related CSS filter functions with live preview. Drag sliders to build stacks such as filter: blur(2px) grayscale(100%); and copy the result.

Design CSS Filter
Open tool