Zero Snippet

Color blindness simulator — preview images and palettes for inclusive design

This free online color blindness simulator helps you preview color vision deficiency (CVD) effects on mockups, charts, and brand palettes. Upload an image with the Upload control (Lucide upload icon), or paste HEX colors to compare original vs simulated swatches. Models cover protanopia, deuteranopia, and tritanopia-style views plus optional grayscale for designs that must not rely on hue alone. Copy simulated values with the copy icon on palette exports. Processing stays in your browser—pair results with the WCAG color contrast checker, the color palette generator, and the color picker and converter. Browse every utility in Design and Color Tools.

M-cone model

100%

Interpolates between normal and strong deficiency for red–green and blue–yellow models. Grayscale ignores this slider.

Upload imagePNG, JPEG, WebP, or GIF — processed locally in your browser.

Why teams use a CVD simulator before shipping UI and data graphics

Roughly one in twelve men of Northern European descent has some form of red–green color deficiency; rates vary by population. Interfaces that distinguish states only with red vs green, or charts that encode categories solely with saturated hues, fail for many users. A color blind simulator online catches collisions early: legend colors that collapse together, error banners that disappear against backgrounds, and dashboard tiles that look identical under deuteranopia. Simulation does not replace WCAG contrast testing for text—that is what our contrast checker is for—or feedback from color blind users, but it is a fast, repeatable design QA step.

Keywords teams search for include simulate color blindness for designers, inclusive color palette, and accessible data visualization. This page targets those intents with client-side previews and copyable outputs so you can document decisions in Figma, Notion, or GitHub issues without sending assets to a server.

How to use this color blindness simulator (step by step)

  1. Choose a simulation mode: red–green (protanopia or deuteranopia), blue–yellow (tritanopia), achromatopsia (luminance only), or normal as a reference baseline.
  2. Adjust severity for the red–green and blue–yellow models. Mild settings help when you suspect your audience includes anomalous trichromacy; full severity approximates dichromatic appearance on standard displays.
  3. On the Image preview tab, click the dashed area or use the upload icon to load a raster image. Compare the original and simulated canvases side by side. Use Clear image to reset.
  4. On the Palette swatches tab, paste HEX codes (from the tint and shade generator or your design system). Use Copy simulated HEX list or Copy CSS comment block with the Lucide copy icon for handoff.

Models, monitors, and limitations

The transforms use published Machado-style matrices in linear sRGB, which matches how many accessibility tools reason about displays. Your monitor calibration, night mode, and wide-gamut profiles all change what you see; simulation is best for relative comparison between design options. Always add non-color redundancy: labels, icons, patterns in fills, and table position—not hue alone.

Related design and accessibility tools

Explore the full Design and Color Tools section. Highlights:

  • Color Picker & Converter — Pick colors and copy HEX, RGB, HSL, and CMYK values for design systems and handoff.
  • Color Contrast Checker — Test text and background pairs against WCAG AA and AAA contrast ratios for accessible UI.
  • Color Palette Generator — From one base hue, build complementary, triadic, analogous, and monochrome palettes.
  • Gradient Generator — Design linear and radial gradients visually and copy production-ready CSS in seconds.
  • Tint & Shade Generator — Generate lighter tints and darker shades from a brand color for consistent UI scales.
  • Box Shadow Generator — Tune offset, blur, spread, color, and inset shadows with live preview and copyable CSS.
  • Border Radius Generator — Adjust each corner visually and export shorthand border-radius for cards and buttons.
  • CSS Gradient Generator — Build multi-stop gradients with angles and stops—outputs clean, modern CSS gradients.
  • Flexbox Playground — Tweak flex container and item properties and see layout updates in real time.
  • CSS Grid Playground — Prototype grid templates, gaps, and placement with instant visual feedback.
  • Favicon Generator — Create favicon.ico and PNG sizes from an image or text for every device and browser tab.

Frequently asked questions

What is a color blindness simulator used for in UI design?
A color blindness simulator shows how images or palettes may look to people with common color vision deficiencies (CVD). Product and design teams use it to check whether status colors, charts, and brand accents remain distinguishable—not to replace medical diagnosis or user testing with real participants. Pair simulation with the WCAG color contrast checker on this site for text legibility.
Which types of color blindness does this tool simulate?
You can preview protanopia-style (red–green, L-cone), deuteranopia-style (red–green, M-cone), and tritanopia-style (blue–yellow, S-cone) transformations using Machado-style matrices, plus optional achromatopsia (grayscale) for complete absence of chromatic cues. Severity sliders interpolate between normal vision and strong deficiency for the first three modes.
Are my images uploaded to a server?
No. Images load in your browser tab with the File API and are drawn to a canvas for pixel processing—nothing is sent to our servers. You can disconnect from the network and still use the tool, similar to our other client-side design utilities.
How accurate is online CVD simulation compared to real vision?
Screen simulations are approximations based on display primaries and published models. Real color perception varies by individual, lighting, display calibration, and the exact type of deficiency. Use this tool to catch obvious collisions between reds and greens in charts or legends, then validate with real users and accessible patterns (icons, labels, patterns in fills).
How do I test a brand palette for accessibility?
Paste HEX codes in the palette tab, pick a deficiency mode, and compare original swatches to simulated swatches. If two semantic states (success vs. warning) look too similar under deuteranopia, adjust hues or add non-color cues. For typography on colored backgrounds, follow up with the color contrast checker and document ratios in your design system.
What is the difference between protanopia and deuteranopia?
Both affect red–green discrimination, but they correspond to different cone pathways in the model: protanopia relates to long-wavelength (L) sensitivity, deuteranopia to medium-wavelength (M). Many interfaces fail for both groups when they rely only on red vs. green without labels; simulation helps you see when pairs collapse together on screen.
Can I copy simulated HEX values for handoff?
Yes. Use the copy buttons next to the palette output to copy a list of simulated HEX codes or a short CSS comment block for tickets or documentation. Icons use the standard copy control from Lucide for consistency with other tools on this site.
Does simulating color blindness replace WCAG contrast testing?
No. Contrast ratios measure luminance difference for text and UI components; CVD simulation checks hue discrimination for charts, icons, and decorative color coding. For body copy and buttons, still test contrast ratios. For heatmaps and dashboards, combine both—plus pattern, position, and text labels.