ACCESSIBLE DESIGN WORKBENCH

Image Color Vision Simulator

Compare a design with approximate color vision simulations. Inspect charts, game interfaces and graphics, then export a preview to discuss with your team.

Local image processingWorker-powered previewSplit + side-by-side views

Choose a view

Up to 12 MiB and 6 million pixels. Preview is resized to a maximum 1,200-pixel edge.

The three color models use full-severity published matrices in linear-light sRGB. Individual perception varies. Grayscale is a separate design check, not an achromatopsia model.

Preparing the demo…

OriginalSimulated preview

These previews help identify color-only distinctions. They do not diagnose vision, certify accessibility or measure WCAG contrast. Add labels, icons or patterns and test with users. Check text contrast separately →

Model and export details

Machado, Oliveira & Fernandes model at full severity. sRGB values are linearized, transformed, clipped to the display gamut and encoded back to sRGB. Transparency is preserved; the preview background is not transformed. Color-managed, wide-gamut or HDR sources may differ after browser conversion. Exports use preview dimensions and omit original metadata.

Research paper · Published matrix reference

Images are decoded locally, without a tool upload. Advertising scripts can technically access page inputs.

Using Image Color Vision Simulator

Preview images with approximate protanopia, deuteranopia and tritanopia simulations or grayscale. Compare views locally and export resized PNG previews and reports.

  1. Try the labeled chart demo or open a PNG, JPG or WebP up to 12 MiB and 6 million pixels.
  2. Choose a color vision model or grayscale. Compare side by side, or use the split overlay slider.
  3. Inspect whether labels, shapes and patterns preserve meaning. Download a preview or comparison PNG, then check text contrast separately.

Example

Try the included editable example.
Choose a color vision model or grayscale. Compare side by side, or use the split overlay slider.

Questions & answers

Is this what every color-blind person sees?

No. It is an approximate display model, not a precise recreation of an individual’s perception. The three color modes use full-severity Machado matrices. Grayscale is only a luminance design check.

Does this prove my design is accessible?

No. Use it to spot reliance on color alone. Add explicit labels, shapes or patterns, check text contrast with the separate checker and test with users.

Is my image uploaded?

The tool decodes and transforms it locally in a browser worker. Advertising scripts can technically access page inputs. Choose a public sample when working with confidential designs.

Which image sizes are supported?

PNG, JPG and WebP up to 12 MiB and 6 million decoded pixels. The preview is resized to a maximum 1,200-pixel edge; all exports use these preview dimensions.

How are colors and transparency handled?

The model transforms linear-light sRGB then clips and re-encodes it. Alpha is preserved. Checker, dark or white preview backgrounds are not transformed. Browser color conversion and gamut clipping can affect the result.

What do the downloads contain?

Simulated PNG exports preserve alpha. Comparison PNGs place original and simulated previews side by side with labels on white. JSON reports include dimensions and model details, not the source image or filename. Source metadata is omitted.

KEEP YOUR WORKFLOW MOVING

A useful next step for your task.

Browse Images & Design

Help improve this tool

Report a problem or suggest an improvement

Describe the issue without pasting private tool input. Feedback goes to our admin inbox.

Find another tool · Read practical guides