Back to ContrastDuo

ContrastDuo Check v2026.08.3

A bookmarklet that measures contrast on any web page, showing the WCAG 2 ratio and the APCA Lc at the same time. It has two modes: element inspection (steps through the page’s text and SVG icons) and eyedropper (samples any pixel on screen). A State selector lets you see and measure the page with :hover, :focus, :focus-visible, :visited or :active applied. From the result, a link takes the combination to ContrastDuo, where it is interpreted.

Install

ContrastDuo Check v2026.08.3

Drag the link above to your bookmarks bar (if you can’t see it: Ctrl+Shift+B in Chrome and Edge). Then, on any page, select the bookmark to measure; select it again to close the panel.

Selecting the link here runs it on this very page, as a demo.

Install without dragging (keyboard)

1. Copy the code from the box below.
2. Create a new bookmark (Ctrl+D or from the bookmark manager) and edit it.
3. Paste the code as the bookmark’s URL and give it a name, for example “ContrastDuo Check”.

Copy the code

How to use it

• Element inspection (initial mode): walk through text and SVG icons with the Previous/Next buttons or with the mouse; a click pins an element. With focus in the panel: Ctrl+←/→ moves by one, Ctrl+↑/↓ by ten, Ctrl+Home/End jumps to the first or last. Escape closes the panel and returns focus to where it was.
• Eyedropper: two buttons to sample the foreground and the background from any pixel, with a magnifier. Ideal for images, gradients and everything inspection mode reports it cannot evaluate.
• State: choosing :hover, :focus, :focus-visible, :visited or :active makes the whole page adopt that state’s declared CSS rules (like forcing states in DevTools, but for every element at once): inspection and the eyedropper measure what you see. “Default” restores the page. If an element is under the cursor, its measurement updates when the state changes.
• With a screen reader: use the Previous, Next and “Announce result” buttons (operable in browse mode). The arrow-key shortcuts require the reader’s focus mode (in NVDA, NVDA+Space).

Known limitations

• The eyedropper uses the EyeDropper API: available in Chromium-based browsers (Chrome, Edge) and only on secure (https) pages. In Firefox and Safari, use inspection mode.
• The eyedropper magnifier is native browser UI: antialiasing alters stroke edges: sample the center. In Chrome the arrow-key movement can also be erratic — that is the browser, not the bookmarklet.
• Inspection evaluates text and monochrome SVG icons. When the background or the graphic cannot be reliably determined (images, gradients, transparency, filters…), it says so and points you to the eyedropper: it never makes up a number.
• The State selector works from the declared CSS rules (only the color declarations are applied: dropdown menus will not open): cross-origin stylesheets without CORS are not readable (the panel says so), color changes made with JavaScript are not detected, and :visited is applied as declared (the browser hides the real state for privacy).
• On macOS, Ctrl+←/→ may be captured by the system (Mission Control): use the Previous/Next buttons, which do the same.

Privacy

The bookmarklet makes no network requests and sends no data anywhere: everything is computed inside the page. The “More info” link opens ContrastDuo with the colors in the URL.

ContrastDuo Check includes the APCA calculation from apca-w3 (W3C Limited License) by Andrew Somers / Myndex Research. The conformance values come from the ARC Silver table, published at apcacontrast.com. All other code © 2026 Mario Germán Almonte Moreno, MIT license.