How to Test Images for Color Blindness — Accessibility Guide
300 million people see your design differently. Here's how to simulate what they see — and fix the problems before publishing.
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. If your UI uses a red/green toggle, a color-coded chart with no labels, or a button that relies on hue alone to signal "danger" — those users are guessing. A color blindness simulator shows you exactly what they see, so you can fix the design before it ships.
Scanly's Color Blindness Simulator applies Brettel/Vienot color matrices to any uploaded image — protanopia, deuteranopia, tritanopia, and achromatopsia. Everything runs in your browser. Try it free →
Upload any image and see how it looks with protanopia, deuteranopia, tritanopia, or achromatopsia. Free, no uploads.
Simulate Color Blindness →Four Types of Color Vision Deficiency
Color vision depends on three types of cone cells in the retina, each sensitive to a different wavelength range: long (red), medium (green), and short (blue). When one type is absent or malfunctioning, certain color distinctions disappear.
Protanopia — missing red cones. Reds look dark, nearly black. Red-orange-green all collapse into similar muddy tones. A red warning banner on a dark background can become invisible. Affects about 1% of males.
Deuteranopia — missing green cones. The most common type, affecting roughly 6% of males. Greens shift toward brown and tan. Red and green become the same color. This is why "red means stop, green means go" fails without shape or position cues.
Tritanopia — missing blue cones. Extremely rare (under 0.01% of the population). Blues and yellows become confused. Less relevant for most design work, but worth testing if your palette is heavily blue-yellow.
Achromatopsia — total color blindness. Everything appears in shades of gray. Only luminance (brightness) differences remain. If two elements differ only in hue but have the same brightness, they become identical. The rarest form, but the most revealing test for your design — if it works in grayscale, it works for everyone.
How Color Blindness Simulation Works
The simulator doesn't apply a crude color filter. It uses Brettel/Vienot transformation matrices — mathematical models from vision science that describe how dichromatic (two-cone) vision maps the three-dimensional RGB color space onto a two-dimensional plane. Each pixel's RGB values are multiplied by a 3×3 matrix specific to the deficiency type, producing the color that a person with that condition would perceive.
These matrices are the standard in accessibility research and are used by tools like Chrome DevTools, Figma's Vision plugin, and WCAG evaluation software. They're not a perfect replica of individual perception — every person's color vision varies slightly — but they're the most accurate computational model available.
Scanly processes the transform entirely in-browser using the Canvas API. The image is drawn to a canvas, pixel data is read via getImageData(), each pixel is transformed through the selected matrix, and the result is written back with putImageData(). No server round-trip, no upload.
Testing Your Designs — Step by Step
Open the Color Blindness Simulator and upload an image. Screenshots of your UI, infographics, charts, maps, logos, and marketing materials are all good candidates. The tool accepts JPG, PNG, WebP, and most other image formats up to 50 MB.
Step 1 — Run all four simulations. Switch between protanopia, deuteranopia, tritanopia, and achromatopsia using the type selector. The side-by-side view shows the original alongside the simulated version. The overlay slider lets you compare specific regions by dragging across the image.
Step 2 — Look for information loss. The question isn't "does it look different?" (it always will). The question is: can you still tell what's what? Specifically, check whether chart segments that were distinct by color have merged into one. Check if status indicators (red/green dots, colored badges) are still distinguishable. Check if text against colored backgrounds is still readable. Check if navigation elements that rely on color highlighting still show which item is active.
Step 3 — Test individual colors. If you want to check specific color values rather than full images, the Contrast Checker lets you input two colors and see their contrast ratio against WCAG AA and AAA thresholds. The Color Picker can extract exact hex values from any image if you need to identify the specific colors in your design.
Step 4 — Download the simulation. Save the simulated image for your accessibility report or to share with your team. Including "this is what our dashboard looks like with deuteranopia" in a design review is more persuasive than any written argument.
What to Fix When Simulation Reveals Problems
Never rely on color alone. This is WCAG 2.1 Success Criterion 1.4.1, and it's the single most impactful rule. Every piece of information conveyed by color should also be conveyed by something else: a text label, an icon, a pattern, a shape, or a position difference.
Add patterns to charts. A pie chart with four colored segments looks identical in three segments to someone with deuteranopia. Add hatching, dots, diagonal lines, or crosshatch patterns so each segment is distinguishable by texture, not just color. The same applies to stacked bar charts, heat maps, and any data visualization.
Pair status colors with icons. Instead of a green dot for "active" and a red dot for "inactive," use a green checkmark and a red X. Or use text: "Active" / "Inactive." The color can stay — it helps sighted users scan quickly — but it shouldn't be the only signal.
Check luminance contrast. Two colors that differ only in hue (same brightness) disappear for people with achromatopsia and become ambiguous for other types. Ensure that any color pair used for foreground/background has a contrast ratio of at least 4.5:1 for normal text (WCAG AA) or 3:1 for large text. This helps everyone, not just color-blind users — it also improves readability in bright sunlight, on low-quality screens, and for aging eyes.
Use a colorblind-safe palette. Several well-tested palettes exist: Wong's palette (8 colors), ColorBrewer's diverging schemes, and Okabe & Ito's barrier-free palette. These were designed so that every color remains distinguishable across all common types of color vision deficiency. You can verify any palette by extracting colors with the Color Palette Extractor and running them through the simulator.
Beyond Images — Where Else to Check
Images and screenshots are the obvious test case, but color accessibility matters everywhere. Error messages that turn a form field red without adding explanatory text. Link colors that are too close to body text color. Hover states that only change hue. Focus indicators that rely on a colored outline matching the brand palette. All of these need the same treatment: test with simulation, add non-color cues where information is lost.
If you're also working on WCAG contrast compliance, the contrast checker guide walks through the full workflow — picking colors from screenshots, understanding AA vs AAA levels, and fixing failing pairs.
Color Is Information — Make Sure It's Not the Only Kind
Color blindness simulation takes ten seconds. Upload a screenshot, cycle through four types, spot the problems. The fixes are usually straightforward — a label here, a pattern there, a contrast bump. The payoff is a design that works for 100% of your users instead of 92%.
The 8% you're missing aren't an edge case. They're 300 million people. Run the Color Blindness Simulator on your next design before it goes live.