Skip to main content
Glama

a11y-toolkit: Live-element contrast sampling

a11y_contrast_dom
Read-onlyIdempotent

Measures real contrast ratio of text against its actual background (image, gradient, video) on a live page, automating screenshot and pixel sampling for WCAG checks.

Instructions

REAL contrast of an element against whatever is behind it (image, gradient, video, photo): loads the page in Chromium, screenshots the element matched by selector with its text turned transparent — so only the real background is sampled, no text pixels, no antialiasing edges — and contrasts the pixels with the text color (computed from the element when not given). The automated version of a11y_contrast_image: no manual screenshot, no region math. Requires local Playwright. — Use instead of a11y_contrast_image when the text lives in a live page (captures and measures it automatically); for flat pairs use a11y_contrast_pair. Returns JSON: {url, selector, text_color, worst_ratio, median_ratio, p95_ratio, area_passes_aa_normal_text_4_5, worst_zone?, sampled_pixels, interpretation}.

Input Schema

NameRequiredDescriptionDefault
urlYesPage URL where the element lives (http/https or file://)
langNoOutput language (default en)
sampleNoPixel step (default 4)
browserNoBrowser engine (auto = detect the first available)
timeoutNoPage load timeout seconds (default 45)
selectorYesCSS selector of the text element to measure
auth_stateNoPath to a Playwright storage_state JSON to measure behind login — stays local
text_colorNoText color (default: computed from the element)

Schema Changelog

Changes observed during successful MCP inspections.

  1. Addedv5.5.0

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnly/openWorld/idempotent/non-destructive, and the description adds genuinely non-derivable context: it launches Chromium, hides the text (transparent) so only real background pixels are sampled, avoids antialiasing edges, and requires local Playwright. It stops short of mentioning runtime cost or browser-launch overhead, so it is strong but not exhaustive.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the core purpose, then methodology, then sibling routing, then return shape. The em-dash parentheticals make it dense, but each segment earns its place and nothing is redundant.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

There is no output schema, so the inline JSON return summary (worst/median/p95_ratio, pass flag, worst_zone, sampled_pixels, interpretation) is necessary and supplied. Combined with prerequisites, routing, and parameter coverage already in the schema, an agent has everything needed to call it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% across all 8 parameters, so the schema already carries the semantics. The description only echoes a couple of schema facts (selector-matched element, text_color computed when not given) and adds no syntax or format detail beyond it — baseline 3.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description names a specific verb and resource (measure the real contrast of an element against whatever renders behind it) and immediately scopes it against siblings by naming a11y_contrast_image and a11y_contrast_pair. An agent can tell exactly which contrast tool to pick without opening any schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicit routing: 'Use instead of a11y_contrast_image when the text lives in a live page' and 'for flat pairs use a11y_contrast_pair.' Alternatives and the conditions that select them are stated outright, plus the practical prerequisite of a local Playwright install.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.