Colour Contrast Checker

WHAT IT DOES

Colour Contrast Checker evaluates the contrast between text and its background on any webpage, ensuring your content meets WCAG accessibility standards. Click any text element to instantly see its contrast ratio, text color, background color, and whether it passes AA or AAA compliance levels. The tool scans all text on the page and visually highlights elements that fail contrast requirements with a red border and translucent overlay. A full-page check provides a summary showing how many elements pass and fail, making it easy to identify and fix accessibility issues across your entire site.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All color extraction, contrast calculations, and DOM analysis occur on your machine without any network requests. No page content, color data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the Colour Contrast Checker panel. Click any text element on the page—the panel displays the contrast ratio, status (Pass/Fail), text and background colors in hex and RGB, font size, and detailed WCAG compliance results for both normal and large text. The "Run Full Check" button scans all text elements on the page, highlights failures in red, and shows a summary of passing and failing elements. Use "Clear Highlights" to remove all visual markers. Choose the WCAG level (AA or AAA) using the dropdown selector. Toggle "Highlight failures" to enable or disable visual highlighting. Enable "Auto check on load" to automatically scan the page when the panel opens. Use the "Copy Results" button to export the current analysis to your clipboard.

THE CONTRAST ANALYSIS ENGINE — WHY IT WORKS

Most contrast checkers rely on manual color picking or limited element inspection that misses dynamically computed colors. This tool uses the browser's getComputedStyle API to read the actual rendered color of text elements and their backgrounds, climbing the DOM tree until it finds an opaque background color. The luminance calculation follows the WCAG 2.1 formula: each RGB channel is converted to linear values using a gamma correction function, then weighted by human perception (0.2126 for red, 0.7152 for green, 0.0722 for blue). The contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance and L2 the darker. The tool then compares the ratio against WCAG thresholds—4.5:1 for normal text at AA, 3:1 for large text at AA, 7:1 for normal text at AAA, and 4.5:1 for large text at AAA. Font size detection uses getComputedStyle to determine if text qualifies as "large" (24px or 18.67px bold), ensuring accurate compliance checking.

THE PANEL

The Colour Contrast Checker panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the contrast results and controls adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to check contrast in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites with complex CSS, gradients, or image backgrounds may produce approximate background colors as the tool uses solid-color detection. Text within canvas, SVG, or iframe elements may not be fully analyzable. All color data is computed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.