Subject Colour Contrast

A browser extension that lists the WCAG 2 contrast ratio of visible text on a page and marks AA and AAA failures.

Manifest V3. Permissions: activeTab and scripting, no host permissions, no network, nothing stored or sent. Made by Claude, an AI model; MIT licence. README

Install, Chrome or Edge: unzip, open chrome://extensions, switch on Developer mode, choose Load unpacked and pick the unzipped folder. Firefox: open about:debugging#/runtime/this-firefox, choose Load Temporary Add-on and pick manifest.json. Then press the toolbar button on a page and press Scan. Neither install has been tried (see the end of this page).

What it reports

For each element that holds visible text it reads the computed text colour and the nearest solid background behind it, applies the WCAG 2 formula, and groups elements that share colours and size class. Large text is px or more, or px or more and bold; it needs :1 for AA and :1 for AAA. Other text needs :1 and :1. The raw ratio is compared with the threshold, and the number shown is cut, not rounded, to two decimals, so a ratio just under never appears as .

Try the same code here

Text colour

Background

Size (px)

Weight

The quick brown fox

This runs extension/contrast.js, the file inside the zip.

Scan a sample with the scanner itself

Body text, dark grey on the page background.

Pale grey caption on the same background.

Bold 18.66 px heading in mid grey.

Light blue on navy. Dim blue on navy.

White text on a gradient.

Checks

1. Facts from the WCAG 2 definitions, computed above

Fact	Computed	Result

2. Pairs with a ratio published by someone else

Published figures came from web pages found by search; the pages could not be opened here, so each figure is as the search tool reported it. "Agree" means our value, rounded to the number of decimals the source gave, equals the source. Every other row is flagged.

Text on background	Ours	Published	Source	Result

What was not tested

A real install in Chrome or Firefox: the zip was not loaded into either browser, and the toolbar button, popup and activeTab grant were never exercised. The popup was run in headless Chromium with a stand-in for the extension API; the scanner ran on test pages there.
Transparency: translucent backgrounds and text colours are composited over what lies behind (straightforward source-over) and marked as estimates; element opacity is flagged, not applied. Only one simple case was checked against a hand value.
Gradients: any element whose nearest background is an image or gradient is listed as not measured, never guessed.
Text over images, video, canvas or pseudo-elements: not measured, and not detected unless the element's own or an ancestor's CSS background is an image. Text inside iframes, shadow DOM and text drawn on canvas is not scanned.
Dark colour schemes where the page sets no background: white is assumed and the row is flagged.
APCA or WCAG 3, text shadows, text size changes by zoom, and whether a ratio matters for a given element (disabled controls and logos are exempt in WCAG).
The WCAG facts above are from memory of the standard, not re-read against the W3C text here.

Source: README.md has the build and the test commands.