Content is loading…
Preview any image the way color-blind users see it — protanopia, deuteranopia, tritanopia.
No green cones — the most common form; reds and greens both shift toward tan/brown.
Upload a UI screenshot, design mockup, or photo and preview how it looks to people with protanopia, deuteranopia, tritanopia, and full color blindness (achromatopsia), plus the milder "-anomaly" variants. Runs entirely in your browser using canvas — nothing is uploaded. Use it to catch color-only signals (like red/green status dots) before they ship.
The Color Blindness Simulator allows designers and developers to instantly preview UI screenshots and mockups across various types of color vision deficiencies, including protanopia, deuteranopia, tritanopia, and achromatopsia. Operating entirely client-side within the browser using canvas, it ensures complete privacy by keeping images on your device with no uploads required. It is an efficient, free way to catch accessibility issues like color-only status indicators before a design ships.
Good to know: This tool is designed for static image previews and may not suit workflows requiring real-time interactive website auditing or automated code-level accessibility scans.
Check your UI designs for accessibility by simulating various types of color vision deficiency directly in your browser.
Upload your image or design mockup
Select a UI screenshot, photo, or design file from your device to load it into the simulator. The tool processes the image locally in your browser using canvas for total privacy.
Select a color blindness profile
Choose from protanopia, deuteranopia, tritanopia, or achromatopsia to see how different users perceive your colors. You can also test milder anomaly variants for more granular accessibility checks.
Identify problematic color-only signals
Review your design for status indicators, like red or green dots, that might become indistinguishable. Ensure that icons or text labels accompany color cues to meet WCAG standards.
Compare different vision deficiency results
Toggle between the various simulation modes to ensure your interface remains functional for all types of color blindness. Verify that contrast levels remain high enough for readability across all profiles.
Estimated time: PT1M
Share this tool
Check WCAG AA/AAA color contrast ratios for accessible web design.
Generate harmonious color palettes from any base color
Extract dominant colors from any image and export as HEX, RGB, HSL, CSS, or JSON.
Remove whitespace and comments to minify CSS code.
Convert colors between HEX, RGB, and HSL formats.
Visually build CSS gradients and copy the CSS output.
Upload an image and get all favicon sizes + HTML link tags.
Generate custom placeholder images with any size, color, and text.
Visually create CSS box shadows with live preview and one-click copy.
Convert text or Markdown to a Word .docx file with live preview, RTL, and page-setup options.
Draw a Secret Santa with exclusions and share a private reveal link for each person.
Make custom bingo cards from your own words — play, print, or share a link.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Load and compare multiple URLs side by side in resizable iframes.
Rank anything with quick 1-v-1 matchups → a full ordered list you can share.
Convert Markdown to a fully customized, RTL-ready PDF.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
