Color Lens — Color Blindness Simulator
Instantly simulate protanopia, deuteranopia, tritanopia & more directly inside VS Code.
Validate theme accessibility and catch color contrast issues before shipping.
Features
🎨 Seven CVD Simulation Modes
| Mode |
Type |
Simulates |
Prevalence |
| Protanopia |
Dichromacy |
No red cones — reds appear dark |
~1.3% of males |
| Deuteranopia |
Dichromacy |
No green cones — red-green confused |
~1.2% of males |
| Tritanopia |
Dichromacy |
No blue cones — blue-yellow confused |
~0.003% |
| Protanomaly |
Anomalous trichromacy |
Weak red cones |
~1.3% of males |
| Deuteranomaly |
Anomalous trichromacy |
Weak green cones (most common) |
~5% of males |
| Tritanomaly |
Anomalous trichromacy |
Weak blue cones |
~0.01% |
| Achromatopsia |
Monochromacy |
Total color blindness (grayscale) |
~0.003% |
🔄 One-Click Toggle
Click the status bar indicator or use the Command Palette to toggle simulation on/off.
When toggling on, a Quick Pick menu lets you choose which CVD type to simulate.
🔀 Seamless Type Switching
Already simulating one CVD type? Use "Color Lens: Select Simulation Type" to switch
to a different one instantly — no flash, no restore-and-reapply cycle.
🎯 Live In-Editor Simulation
Your actual editor changes colors. Every UI element — syntax highlighting, sidebar,
status bar, git decorations, bracket colors, error squiggles — transforms to show
exactly what a color-blind user would see.
🛡️ Automatic Restore & Crash Recovery
- Toggle off → all original colors restored instantly
- VS Code closes normally → colors restored in
deactivate()
- VS Code crashes → colors restored automatically on next launch from a persisted snapshot
🎨 Theme Change Aware
Switch themes while a simulation is active — the extension automatically re-parses
the new theme and re-applies the simulation. No manual re-toggle needed.
Usage
- Click the
$(eye) Color Lens indicator in the status bar
- Pick a CVD type from the dropdown
- Your entire editor shifts to simulate that condition
- Click the status bar again (now
$(eye-closed) ...) to deactivate
Or use the Command Palette (Ctrl+Shift+P):
Color Lens: Toggle Simulation — on/offColor Lens: Select Simulation Type — pick or switch CVD typeColor Lens: Deactivate — force off
Settings
| Setting |
Type |
Default |
Description |
color-lens.defaultSimulation |
enum |
deuteranopia |
Default CVD simulation type |
color-lens.showStatusBar |
boolean |
true |
Show/hide the status bar indicator |
Commands
| Command |
Description |
Color Lens: Toggle Simulation |
Toggle simulation on (shows picker) or off |
Color Lens: Select Simulation Type |
Always shows picker; switches type if already active |
Color Lens: Deactivate |
Force deactivate (no toggle) |
How It Works
- Locates the active theme's JSON file by scanning
vscode.extensions.all
- Parses the theme (with JSONC support and recursive
include resolution)
- Extracts all colors: workbench UI, TextMate token rules, and semantic token colors
- Transforms every color through the selected CVD simulation matrix using the
scientifically accurate pipeline:
HEX → sRGB → linear RGB (gamma removal) → matrix multiply → sRGB (gamma reapply) → HEX
- Applies transformed colors as VS Code setting overrides
- Restores all original settings when deactivated
Color Science
Uses the Machado, Oliveira & Fernandes (2009) simulation model — the same model
used by Chrome DevTools, Adobe products, and WCAG accessibility tooling. All transforms
are performed in linear light space with proper sRGB gamma correction.
Requirements
- VS Code 1.108.0 or later
- Works on Windows, macOS, and Linux
Troubleshooting
| Issue |
Solution |
| Simulation doesn't apply |
Open Output → "Color Lens" to check logs. The theme file may not be locatable. |
| Some colors look unchanged |
The extension transforms colors explicitly defined by the theme. VS Code's default colors for keys the theme doesn't set are not transformed. |
| Colors stuck after crash |
The extension auto-recovers on next launch. If colors are still wrong, run Color Lens: Deactivate. |
Before Publishing
Before publishing to the Marketplace, add an icon.png (128×128 or 256×256) to a
media/ folder and add "icon": "media/icon.png" to package.json.
Credits
License
MIT © 2026 Subarno Neel
