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
A visitor clicks the eye and picks a mode — Recommended if they don't know their type, or a specific one.
The page's colors are re-mapped so the differences their vision compresses become visible (daltonization, via an SVG color filter).
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.
position:fixed/sticky elements can shift while a mode is on, and it can't exempt individual images. Test on your site before production. A per-element strategy is the planned v2.
QUESTIONS
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.
It corrects — re-coloring the page so colorblind visitors can distinguish colors that would otherwise collapse, rather than simulating the deficiency.
It's tiny and does nothing until a visitor turns it on. Its one real caveat is fixed/sticky layouts (see the note above) — test before shipping.