Private accessibility tool
Use the color blindness simulator to compare an illustration, interface, chart, or screenshot with protanopia, deuteranopia, and tritanopia previews. The image stays in your browser, all four views stay aligned, and exports record the selected strength.
Updated July 26, 2026
color blindness simulator
The color blindness simulator applies three published color-vision-deficiency transformation matrices to the pixels of one local image. It displays the original beside protanopia, deuteranopia, and tritanopia approximations, then lets you blend from 0% original color to the 100% matrix result. The color blindness simulator helps reveal places where hue-only distinctions may weaken. It cannot reproduce one person's perception, diagnose color vision, or certify an interface as accessible.
color blindness simulator
The color blindness simulator keeps every view aligned so the comparison stays about color, not layout.
Every color blindness simulator preview uses the same source canvas. Character features, chart marks, labels, controls, and backgrounds stay in the same position, making a lost distinction easier to locate.
The color blindness simulator decodes PNG, JPEG, and WebP files with browser APIs. There is no image-upload endpoint, cloud library, account, or server-side processing step in this tool.
The color blindness simulator creates one labeled PNG with the original and three simulated views. A designer can attach that artifact to an accessibility review while retaining the original file separately.
Browser-local image comparison
Load one PNG, JPEG, or WebP up to 12 MB. The color blindness simulator produces four aligned canvases without uploading the image.
PNG, JPEG, or WebP · up to 12 MB · paste also works
Toon Tone sample artworkFour aligned views are ready.
color blindness simulator
A color blindness simulator is most useful when it leads to a specific inspection and a concrete design change, not a vague impression that a palette looks different.
Upload the exact screen, chart, illustration, or character pose users will see. A color blindness simulator result from an isolated swatch cannot expose a label, border, focus state, or overlapping mark that disappears in context.
Scan the protanopia, deuteranopia, and tritanopia cards for pairs that become difficult to separate. Use the color blindness simulator at 100% for the full matrix output, then lower the blend to understand where the change first becomes noticeable.
When the color blindness simulator exposes a hue-only distinction, add text, an icon, a pattern, an outline, a shape change, or a position cue. The W3C use-of-color criterion is about preserving meaning, not making every simulated image identical.
Re-export the actual revised state, run the color blindness simulator again, and pair the visual check with the site's color contrast checker. Simulation, contrast, keyboard use, labels, and real-user testing answer different accessibility questions.
color blindness simulator
The color blindness simulator uses the three full dichromacy matrices from the Machado, Oliveira, and Fernandes model. The traditional red-green and blue-yellow labels are shorthand, not a complete description of individual perception.
| View | Model focus | Common shorthand | Review question |
|---|---|---|---|
| Original | Unmodified sRGB source pixels | Reference view | Which distinctions carry meaning before simulation? |
| Protanopia | Full protan dichromacy matrix | Red-green family | Do red-led accents, warnings, or details merge with nearby colors? |
| Deuteranopia | Full deutan dichromacy matrix | Red-green family | Do green-led states, chart series, or character features remain distinct? |
| Tritanopia | Full tritan dichromacy matrix | Blue-yellow family | Do blue and yellow information channels still differ without labels? |
A color blindness simulator estimates how color relationships may shift under a selected model. A contrast checker calculates relative luminance between a foreground and background. A pair can meet a text contrast ratio yet still be a poor pair for two unlabeled chart series, because both marks may remain readable against the canvas while becoming difficult to distinguish from each other. The reverse can also happen: two hues remain obviously different in the color blindness simulator but both fail the minimum text contrast against a pale background. Use each tool for the decision it actually measures.
The color blindness simulator is especially helpful for categorical color. Teams, transit lines, game powers, status dots, map regions, and data series often depend on hue differences rather than a foreground-background ratio. Inspect the exact state in which those colors appear. If the color blindness simulator makes two categories look close, preserve the palette if it supports the art direction, but add a direct label, marker shape, dash pattern, icon, or spatial grouping. This follows the W3C principle that color should not be the only visual means of conveying information.
Toon Tone connects the color blindness simulator to the existing color contrast checker because a finished review usually needs both. Start with the color blindness simulator to find possible loss of distinction across the whole image. Then measure any text, icon, control, or essential boundary that depends on a foreground-background pair. Neither result is an accessibility certificate. Together they create a more useful evidence trail than treating one green badge or one passing ratio as proof for an entire product.
color blindness simulator
Use the same color blindness simulator sequence before approving a new palette, illustration, chart, or interface state.
color blindness simulator: Capture the real production state with labels, legends, focus indicators, and backgrounds visible.
color blindness simulator: Review protanopia, deuteranopia, and tritanopia at 100% preview strength and at the smallest intended display size.
color blindness simulator: Identify every distinction that carries meaning through color alone, then add a text, shape, pattern, icon, or position cue.
color blindness simulator: Measure important foreground-background pairs with the color contrast checker instead of inferring contrast from the simulation.
color blindness simulator: Export the four-view PNG, record the changed design decision, and repeat the color blindness simulator after implementation.
color blindness simulator
The color blindness simulator uses primary research for its matrices and official accessibility sources for the surrounding workflow. The numbers describe populations, standards, and model scope; they do not predict one viewer's exact experience.
W3C summarizes the goal in nine words:
Color is not the only way of distinguishing information.
color blindness simulator
No. The color blindness simulator transforms image pixels to create design-review approximations. It does not examine a viewer, screen for color-vision deficiency, measure severity, or provide a diagnosis. The National Eye Institute recommends an eye doctor for testing.
No. A color blindness simulator can reveal color distinctions that may weaken, but accessibility also depends on contrast, text, shape, labels, keyboard operation, zoom, motion, assistive-technology semantics, content, and user testing. Record the result as one review input.
Protanopia and deuteranopia are commonly described as red-green types, while tritanopia is commonly described as blue-yellow. The color blindness simulator keeps all three visible because the same palette can behave differently under each matrix.
The color blindness simulator strength slider blends between original linearized sRGB pixels at 0% and the full matrix output at 100%. Intermediate values are a visual comparison aid, not a medical severity estimate.
The color blindness simulator processes supported images in the current browser tab and has no image-upload endpoint. Closing or refreshing the tab clears its working Canvas. Downloaded comparison files remain wherever the user saves them.