OPTICQUIZ
EYE · WIDGET
Accessibility · One line of code

ADD A COLORBLIND
MODE TO ANY SITE

One script tag drops a floating eye on your page. A visitor opens it and re-colors your site live so they can tell colors apart — for their type of color blindness, or a recommended all-types correction. Free, private, and based on a published method. This page is running it — look bottom-right. 👁

ADD IT

<script src="https://opticquiz.com/widget/eye.js" defer></script>

That's the whole install. No account, no build step, no configuration. Works on static HTML, WordPress, Shopify, React, anything that renders HTML.

HOW IT WORKS

1

A visitor clicks the eye and picks a mode — Recommended if they don't know their type, or a specific one.

2

The page's colors are re-mapped so the differences their vision compresses become visible (daltonization, applied to computed styles — not to pixels, so photographs are never touched).

3

Their choice is remembered in their browser. Nothing is sent anywhere.

It corrects, it doesn't simulate — the point is to help the visitor see, not to show sighted people what color blindness looks like. A red/green pair a deuteranope perceives at CIEDE2000 ΔE ~8 becomes ~29 after correction.

PRIVATE BY DESIGN

Zero tracking. No network requests. No identifiers. The visitor's chosen mode lives only in their own browser's storage. An accessibility tool should never be a surveillance vector.

Honest scope. Correction is a powerful aid, not a guarantee — no single transform resolves every case, and it doesn't replace designing with colorblind-safe colors in the first place. What v2 does not do: where text sits on a bitmap background, the contrast ratio can't be proven, so the widget leaves the author's own ratio untouched rather than guessing; and where your operating system's own contrast setting is active, the widget stands down and leaves the OS in charge. Test on your site before production.

WHAT IT GUARANTEES

v2 separates two jobs, because they pull in opposite directions. Text is set to pure black or pure white — whichever reads better against the corrected background behind it. Choosing the better of the two is worst at a background luminance of 0.179, where both tie at 4.58:1, so every run of text clears WCAG AA by construction, not by spot-check. Verified across 592,704 backdrop colors: worst observed 4.583:1.

Everything else — backgrounds, borders, SVG fills and strokes — gets the full correction, because those surfaces carry the color-coded information and no text-contrast rule applies to them. On color pairs a dichromat genuinely cannot separate, correction lifts mean CIEDE2000 from 1.9 to between 10.8 and 21.6, separating 97–100% of them.

Measured on this site's own home page: uncorrected, five text elements fall below AA, the worst at 1.17:1. With any correction mode on, all 171 text elements pass, worst case 5.10:1. Photographs, video and canvas are untouched by construction, and because nothing is filtered, position:fixed and sticky behave exactly as you wrote them.

The developer platform — engine, API, widget, VS Code, MCP → Check your palette is colorblind-safe (the other half) → Is your default palette safe? viridis, jet, Tableau… → The published method behind it →

QUESTIONS

How do I add a colorblind mode to my website?

Add the one script tag above. A floating eye appears; visitors open it and pick a correction mode. No account, no build step, no tracking.

Does it simulate colorblindness or correct it?

It corrects — re-coloring the page so colorblind visitors can distinguish colors that would otherwise collapse, rather than simulating the deficiency.

Will it slow down or break my site?

It's tiny and does nothing until a visitor turns it on. Turning a mode on costs about 4 ms on a 374-element page, and it adds no network requests at all. It doesn't filter the page, so fixed and sticky layouts are unaffected — test before shipping all the same.