Playground · Tool

Lens Kit

A pocket accessibility lens. Drag it to your bookmarks bar, click it on any page. See it through colorblind eyes, scan the contrast, carry the findings to Claude.

Bookmarklet WCAG 2.1 AA Color vision Vanilla JS No install

00 · Try it

Turn the lenses on, right here.

The kit is a small floating toolbar. Five lenses simulate how this page reads with protanopia, deuteranopia, tritanopia, achromatopsia, and low vision. One button scans every visible text element for WCAG contrast and badges what fails.

then pick a lens, or hit Scan page
Specimen · built to fail these four cards are intentionally broken, so the scan has something to catch

Soft gold on white

This sentence uses the soft gold accent as body text. Pretty, and unreadable.

Expected: contrast fail, roughly 1.7:1

Faint ink on white

De-emphasized text taken one step too far. Common in captions and placeholders.

Expected: contrast fail, roughly 2.4:1

Red vs green, color only

Status told by hue alone. Toggle the deuteranopia lens and watch the difference vanish.

Error Success Warning
Expected: lenses make the point, not the scan

Text on a gradient

Muted text over a wash. The scan cannot score this honestly, so it asks for a human eye.

Expected: flagged for manual check

01 · The bookmarklet

One drag, then it works everywhere.

No install, no store, no account, no hosting. The button below is a link that carries the entire engine inside itself. Once it sits in your bookmarks bar, one click opens the kit on whatever page you are looking at, your staging build, a client site, anything.

✦ Lens Kit drag this button to your bookmarks bar, do not click it here

02 · What it checks

Fast, visual, and honest about its edges.

Lenses

Color vision simulation

Full-page filters built from the Machado 2009 research matrices, the same science behind Color Oracle. While a lens is on, a pinned thumbnail keeps the normal view on screen for side by side comparison. Escape clears.

Scan

WCAG contrast ratios

Walks every visible text element, resolves the real background, and checks 4.5:1 for body text and 3:1 for large text. Failures get badged in place.

Report

Copy as Markdown

The findings export in my accessibility-review skill format. Paste into Claude, run the skill, get the full WCAG 2.1 AA audit. The kit is the eyes, the skill is the brain.

Honest limits. Backgrounds that are images or gradients are listed for manual review, never guessed. Sites with a strict content security policy can block injected scripts, which is exactly why a browser extension build of the same engine is the natural phase two. The toolbar itself keeps 44px targets, visible focus, and reduced-motion fallbacks. It has to pass its own scan.

03 · The reverse

Turned around, the lens becomes an assist.

The vision lenses subtract what normal vision has. That direction serves designers. The My vision section in the toolbar runs the same matrices in reverse: pick your own vision type, and the assist lens redistributes the color signal you miss into the channels you keep, so pairs that looked identical pull apart.

One honest limit stays. A protanope cannot be shown true red, no screen can add a cone. But red and green can stop lying. And the simulation lenses gain a second life in this direction: switch on your own vision type, take a screenshot, and show your team the world you actually work in.

try it: open the kit, turn on Deutan assist, and watch the Error and Success dots in the specimen pull apart