Colour Blind Simulation Toggle

WHAT IT DOES

This script simulates color blindness conditions on any webpage, helping designers, developers, and accessibility testers understand how their content appears to people with different types of color vision deficiency. You can choose from four simulation types: protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and achromatopsia (total color blindness). The simulation applies CSS filters to the entire page, including images, videos, and other visual content. A visible badge in the corner of the page shows which simulation is active, and clicking the badge turns it off. The selected simulation type is saved locally and persists across browsing sessions.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with visual content—designs, dashboards, images, charts, maps, and more. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable simulation" toggle enables or disables the script.

- Select a simulation type from the buttons: "Normal Vision," "Protanopia (Red-Blind)," "Deuteranopia (Green-Blind)," "Tritanopia (Blue-Blind)," or "Achromatopsia (Total)."

- A badge appears in the bottom-left corner showing the active simulation. Click the badge to disable the simulation instantly.

The script works automatically—just select a simulation type and the page will update in real-time.

TECHNICAL SECTION — REAL MECHANISM

The script applies CSS filters to the page using two methods. For protanopia, deuteranopia, and tritanopia, it uses SVG filters with feColorMatrix elements that apply color transformation matrices specific to each color blindness type. The matrices use values that shift colors to simulate the reduced sensitivity to red, green, or blue light. For achromatopsia, it uses the CSS filter property grayscale(1), which converts all colors to grayscale. The filters are injected into the page as a style element with a universal selector (*) and are also applied to img, video, canvas, and iframe elements. The SVG filter definitions are injected as a hidden SVG element at the start of the document. The badge is a fixed-position div with a glassmorphism style that shows the active simulation label. All settings are persisted via GM_setValue and loaded on page load. A MutationObserver watches for DOM changes and re-applies the filters when new content is loaded.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The simulation is an approximation and may not perfectly represent how individuals with color blindness perceive colors, as color vision deficiency varies in severity. The script applies filters to the entire page, which may affect performance on complex pages. The SVG filters use color matrices that work on most modern browsers. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.