Preview a UI design or screenshot under different color vision conditions to find where information depends on color alone. Compare the original and the simulated result side by side and review status colors, chart series and selected states for non-color cues. Protan, deutan and tritan views plus a grayscale check are available, and images are processed entirely in your browser.
Add the design you want to review.
PNG, JPG or WebP · up to 10MB · choose a file, drag it here or pasteImages are processed in your browser and never uploaded to a server.Found a foreground and background pair that became hard to read? Measure the actual WCAG ratio and a passing alternative in the color contrast checker.
The purpose of this tool is not simply to recolor a screen. It is to reveal whether meaning, state and priority disappear when color differences become less distinct. Compare the original and simulated views around elements where color performs a function, including success and error states, active and inactive controls, and multiple chart series.
WCAG 2.2 requires that color is not the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. This does not mean removing color. It means pairing color with text, icons, patterns, shapes, position or another visible cue.
Protan describes a change in the red signal. Some reds appear darker or move closer to greens and browns, so red and green status badges, chart series, and red warnings on dark surfaces are where problems tend to show.
Deutan describes a change in the green signal. Differences among greens, reds, browns and oranges decrease together, which makes it useful for approval states, map legends and progress color scales.
Tritan affects the blue-yellow range. Differences can decrease among blue-green, purple-red and yellow-pink combinations, so use it to review blue links next to green states, purple and red charts, and yellow highlights.
Treat these as a guide to where to look, not as a prediction that every listed pair will fail. The visible result depends on the source colors, luminance, saturation, background and the selected strength, so compare the actual design.
At 0%, the result matches the original. Increasing the value reduces color differences according to the selected condition. A 100% view is a conservative stress test for checking whether information survives a strong transformation. Start at 100% to find lost distinctions, then compare intermediate values such as 40% to 70% to prioritize changes.
Color perception varies continuously, and lighting, displays and color profiles also affect the result. Do not treat one setting as a universal view. Design so that meaning remains available across several conditions and strengths.
Status and feedback: if success is only green and error is only red, the meaning can disappear when those colors move closer together. Add explicit status text and different icons. For form errors, do not rely on a colored border alone; place the cause and suggested correction near the field.
Charts and data visualization: series connected to a legend by color alone can become indistinguishable. Combine solid, dashed and dotted lines with different point shapes, and use patterns, borders or direct labels for bars and areas. For sequential data, sufficiently separated luminance steps are often more reliable than adding more hues.
Links, tabs and selected states: check whether inline links, active tabs and selected cards only change color. Add an underline to links, weight or an indicator line to active tabs, and a check icon or border treatment to selected cards.
Controls and icons: review button text against its fill, input borders against the outer surface, and meaningful icons against adjacent colors. If a pair becomes difficult to see, enter its foreground and background colors in the contrast checker to measure the applicable WCAG ratio.
Grayscale is a stress test that removes color as an information cue rather than a representation of any color vision condition. If states, series or selections collapse into the same gray, the design likely relies heavily on hue.
This tool converts to gray using relative luminance rather than a channel average, so the contrast ratio between any two colors stays exactly what it was in the original and only the hue cue is removed. Anything that becomes indistinguishable here is a color-dependence problem, not a contrast problem.
The goal is not to make every color look different in grayscale. The goal is to keep the same information available through labels, icons, patterns, line styles or other visible structure. Ask one practical question: can a user still identify the original meaning when color is removed?
Start by adding a text label that states the meaning directly, and use different icons or shapes for success, error, warning and selected states. Add line styles, point shapes, patterns or direct labels to chart series.
Then increase the luminance difference between foreground and background or between adjacent data colors. Do not assign an important state to a tiny color dot; provide sufficient area and clear placement. Recheck the revised design in all three views and in grayscale.
Color remains useful for fast recognition and emphasis. The objective is not to discard a brand palette but to ensure that removing a color difference does not also remove function or meaning.
A color vision simulation helps locate different colors that may become difficult to distinguish. A contrast checker measures whether the relative luminance between two colors reaches a WCAG threshold. Red and green states can each contrast strongly with their background while still failing when color is the only difference. A pair can also remain different in the simulation while the text-to-background contrast is too low.
Use the simulator to locate a design risk, then measure the actual foreground and background pair in the contrast checker. The two tools complement each other.
Confirm that success, error, warning and completion states include text or an icon, and that chart series can be distinguished by line style, pattern, shape or a direct label. Links, active tabs and selected cards should carry a non-color cue as well.
Check that text, icons and input boundaries have sufficient contrast against their actual background, and review light and dark themes along with default, hover, focus, selected and error states. Finally, confirm that the information required to complete the main task remains available in the protan, deutan, tritan and grayscale views.
Anywhere status is shown by dot color without a label becomes effectively unreadable. Pair the dot with status text or a distinct icon.
Different views leave different cues intact. A distinction lost under deutan can partly survive as lightness under protan, so check all three.
Grayscale leaves luminance differences untouched and removes only color. Anything that merges here needs an underline, icon or shape cue.
Last verified:
What it is, who it's for, how it works and why you'd use it.
A color blindness simulator transforms the colors in a UI design or screenshot and compares the simulated result with the original image.
It is for designers, developers and product managers reviewing color accessibility in status indicators, charts, maps, links and selected controls.
It processes image pixels locally and displays protan, deutan, tritan or grayscale views next to the original at the selected simulation strength.
It helps teams find places where reduced color differences also remove meaning, state or visual separation before implementation or release.