Colour Filter Overlay

WHAT IT DOES

Colour Filter Overlay is a browser extension that applies a semi-transparent colour filter overlay to any webpage, helping users with visual processing difficulties, dyslexia, migraines, and light sensitivity. You can choose from multiple filter types including monochrome, sepia, blue-light reduction, high contrast, inverted, custom tint, and color blindness simulation filters (protanopia, deuteranopia, tritanopia). The opacity of the overlay can be adjusted from 0% to 100%. The tool is ideal for users who benefit from colour overlays to reduce glare, improve contrast, or alter the visual appearance of content for easier reading and viewing.

WHERE IT RUNS

Colour Filter Overlay runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, applying CSS filters or SVG filters to an overlay element or the page body. It works on any page, whether static or dynamic, with no external dependencies. All settings are stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel shows the current status (Enabled or Disabled) and a toggle button to enable or disable the filter overlay. Select a filter type from the dropdown: None, Monochrome, Sepia, Blue Light Reduction, High Contrast, Inverted, Protanopia, Deuteranopia, Tritanopia, or Custom Tint. Adjust the opacity slider to control the intensity of the filter overlay (0-100%). Click the "Reapply" button to refresh the filter if needed. All settings are saved per website, so your preferences persist across visits. The filter overlay covers the entire page and does not interfere with clicking or interacting with page content.

REAL MECHANISM — WHY THIS WORKS

Most color filter tools require system-level settings or separate applications that affect all windows. Colour Filter Overlay uses a CSS-based overlay approach that applies filters exclusively to the current webpage. The tool creates a fixed-position overlay div with pointer-events: none, allowing interaction with page content while the filter remains active. The overlay applies CSS filters (grayscale, sepia, hue-rotate, brightness, contrast, saturate, invert) or uses SVG color matrix filters for color blindness simulations (protanopia, deuteranopia, tritanopia). The custom tint uses a semi-transparent background with multiply blend mode. The opacity control adjusts the intensity of the filter effect. The high contrast and inverted filters are applied directly to the body element for maximum effect. The tool saves the filter type and opacity in GM_setValue for persistence. This approach ensures accurate, flexible, and fully private color filtering without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view controls. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position, enabled state, filter type, and opacity—are saved per domain for a seamless experience.

PLEASE NOTE

Colour Filter Overlay requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool applies filters using CSS and SVG; performance may vary depending on the page complexity and filter type. The overlay does not interfere with interaction but may affect the visual appearance of the page. Color blindness simulation filters are approximations and may not perfectly replicate the experience of color blindness. All settings are stored locally in your browser using GM_setValue. No page content, filter data, or usage information is ever sent to any server. The extension does not read, store, or transmit any personal information. It only applies visual filters at your request.