Color Vision Lab - Accessibility Visualization Tool

Educational Design Aid: Color-vision previews are approximate and are not a medical/diagnostic test or a WCAG conformance determination. Uploaded image bytes stay in this page and are not uploaded by the app; interface styling/icons load from Tailwind and Font Awesome CDNs.

Runtime note: the app logic and uploaded-image processing run in this page, while Tailwind CSS and Font Awesome icons are requested from CDNs. If those assets are blocked, styling/icons may degrade.

Simulated Vision Type

Display Mode

Demo Preset UI

Local Design Import Upload Image

Protan-like Preview: Approximate protan-like red/green color-separation stress test. *Simple RGB color-matrix previews for design exploration. They are not a validated perceptual model, medical simulation, or conformance test; individual perception and displays vary.

Original View (Standard RGB) 100% Spectrum

Protan-like Preview Approximation Filter

Contrast & Palette Separation Matrix

Check WCAG 2.2 text-contrast thresholds alongside an approximate color-separation preview. The separation preview is a design heuristic, not a WCAG conformance test.

Text Contrast Checker (WCAG 2.2)

Foreground Color

Background Color

Large-text example (24px / 18pt normal) Normal-text example (16px)

Contrast Ratio 15.8:1

WCAG text thresholds

AA normal AA large AAA normal AAA large

Contrast Problems vs. Color Distinguishability Problems

A common mistake in design system audits is treating Contrast and Color-Vision Distinguishability as identical issues:

Contrast Problems (WCAG 1.4.3): Relate to light/dark luminance difference between text and its background. Fixed by increasing luminance difference.
Color Distinguishability Problems (WCAG 1.4.1): Occur when two different categories or status hues (e.g., Red vs Green) merge into identical shades under color blindness, even if both individually have high contrast against white!

Example: two status colors can each have adequate contrast against a background and still fail the design goal if users must identify status from hue alone. Add text, icons, patterns, shapes, or another visible cue.

Palette Separation Heuristic

Compare state colors through approximate previews. Warnings use an app-local sRGB-distance heuristic and do not establish accessibility or WCAG conformance.

Color Pair	Normal RGB	Protanopia	Deuteranopia	Grayscale	Heuristic Warning

Color Vision Lab Accessibility Tool

Custom Interface Builder Sandbox

Information Reliance Inspector

Enhancement Cues

System Status Dashboard Test Side-by-side impact comparison

Chart Accessibility Lab

Chart Controls

Quarterly Revenue by Region

Contrast & Palette Separation Matrix

Text Contrast Checker (WCAG 2.2)

Palette Separation Heuristic

Interactive Design Challenges

Fix the Ambiguous Dashboard Status Dots

Make the Multi-Line Analytics Chart Readable

Form Validation Error States