Home Text Tools Math & Numbers Developer Tools Date & Time
Developer Tools

Color Blindness Simulator

Upload an image or enter a hex color to see how it appears with different types of color vision deficiency.

🖼️
Click or drag & drop an image to simulate

Test your designs for color accessibility by simulating how they appear to users with different types of color vision deficiency. Supports image upload and single-color simulation across 6 vision types.

Features

6 Vision Types
Normal, Deuteranopia, Protanopia, Tritanopia, Achromatopsia, and Deuteranomaly simulation.
Image Mode
Upload any image to see how it renders for each vision type side-by-side.
Color Mode
Enter a hex color to see how it shifts under each type of color blindness.
Matrix-Based Simulation
Uses color transformation matrices for scientifically accurate simulation.

How to Use

  1. Switch to Image Mode or Color Mode.
  2. In Image Mode: drag and drop an image to simulate it.
  3. In Color Mode: pick a color or enter a hex code.
  4. View all 6 vision type simulations simultaneously.

FAQ

What is deuteranopia?▾

Deuteranopia is red-green color blindness caused by absent green cone cells — the most common form, affecting ~6% of males.

How should I design for color blindness?▾

Don't rely on color alone to convey information. Use patterns, labels, and sufficient contrast to ensure content is accessible to all users.

Color Blindness Statistics

  • ~8% of males have some form of color blindness.
  • Deuteranopia/anomaly is the most common type.
  • Achromatopsia (total color blindness) affects ~1 in 30,000.

More Developer Tools

{ }
JSON Formatter & Validator
Format, validate, and minify JSON data instantly
🔐
Base64 Encoder / Decoder
Encode or decode Base64 strings in one click
🔗
URL Encoder / Decoder
Encode or decode URL-safe strings
🎨
Color Code Converter
Convert color codes between HEX, RGB, and HSL formats
🔑
Strong Password Generator
Generate strong, secure passwords with custom rules
🎨
CSS Formatter & Beautifier
Format and beautify or minify CSS code online
🏷️
HTML Formatter & Beautifier
Format and beautify or minify HTML code with proper indentation
📋
XML Formatter & Beautifier
Format and validate XML. Check if XML is well-formed
📊
CSV Formatter Online
Format CSV data and preview it as a table with multiple delimiter support
🔄
CSV to JSON Converter
Convert CSV data to a JSON array instantly
🔄
JSON to CSV Converter
Convert a JSON array to CSV format instantly
{ }
JSON to JSONP Converter
Wrap JSON in a JSONP callback function for cross-domain requests
{ }
JSONP to JSON Converter
Strip JSONP callback wrapper and extract the pure JSON
⏰
Cron Job Expression Generator
Generate cron expressions with human-readable descriptions and presets
🔒
Mask Sensitive Data
Mask emails, phone numbers, and credit cards in text
🔐
Password Strength Checker
Check password strength with a live meter and criteria checklist
📧
Random Email Generator
Generate random email addresses for testing and development
👤
Random Username Generator
Generate random usernames in various styles for accounts and profiles
🌍
Domain Name Extractor
Extract domain names from URLs and text with deduplication
🗺️
Sitemap XML Validator
Validate sitemap XML structure and list all URLs found
⌨️
Online Screen Keyboard
Virtual on-screen keyboard with shift, caps lock, and copy support
🆔
UUID Generator
Generate random UUID v4 or timestamp-based UUID v1 in bulk
#️⃣
Hash Generator (SHA-256 / MD5)
Generate SHA-256, SHA-1, and MD5 hashes from any text
🏷️
HTML Entity Encoder / Decoder
Encode or decode HTML special characters and entities
🔎
Regex Tester
Test regular expressions with live match highlighting
🔓
JWT Decoder
Decode JWT tokens and inspect header and payload
🔄
JSON to YAML Converter
Convert JSON data to YAML format in the browser
🔄
YAML to JSON Converter
Convert basic YAML to pretty-printed JSON
🗄️
SQL Formatter Online
Format and beautify SQL queries or minify to one line
🔡
Number to Words Converter
Convert integers up to 999 billion into English words
🌈
CSS Gradient Generator
Build linear or radial CSS gradients visually and copy ready-to-use CSS code
🎨
Color Palette Generator
Generate complementary, analogous, triadic, and monochromatic color palettes
♿
Color Contrast Checker
Check color contrast ratio for WCAG 2.1 AA and AAA accessibility compliance
🏷️
Meta Tag Generator
Generate complete HTML meta tags including SEO, Open Graph, and Twitter Card tags
🤖
Robots.txt Generator
Generate a robots.txt file with custom crawler rules, disallow paths, and sitemap URL
📷
Image to Base64 Converter
Convert PNG, JPG, GIF, SVG, or WebP images to Base64 data URI for HTML and CSS
⬛
QR Code Generator
Generate QR codes from URLs, text, email, phone, or Wi-Fi. Download as PNG or SVG
🟫
CSS Box Shadow Generator
Visually build CSS box-shadow styles with live preview and copy the CSS code
⬜
CSS Flexbox Generator
Configure flexbox container properties visually with live preview and copy CSS
📐
PX ↔ REM / EM Converter
Convert CSS units between pixels, REM, and EM with bulk conversion and reference table
🔗
UTM Link Builder
Build UTM-tagged campaign URLs for Google Analytics. Add source, medium, campaign, and more
🔍
URL Parser & Analyzer
Parse any URL into protocol, hostname, path, query parameters, and hash. Edit and rebuild URLs
⬛
CSS Border Radius Generator
Control each corner radius individually with live preview and copy the CSS code
🔄
JSON ↔ XML Converter
Convert JSON to XML and XML to JSON instantly with formatted output
⊞
CSS Grid Generator
Build CSS grid layouts visually with live preview and instant code export
🌐
IP Address Lookup
Look up geolocation, ISP, and timezone for any IP address instantly
📡
HTTP Status Codes
Complete reference for all HTTP status codes 1xx–5xx with descriptions
📋
Markdown Table Generator
Build Markdown tables visually and copy the code instantly.
🖼️
Image to Base64
Convert any image to Base64 data URI for embedding in code.