OverlayQA MCP

Run WCAG accessibility and color-contrast audits on any URL and file dev-ready QA issues, straight from Claude Code, Cursor, or Windsurf. Free tier: 3 scans/day.

GitHubこのMCPを試すスポンサー

ドキュメント

OverlayQA MCP

Install in Cursor Install in VS Code npm license MCP

OverlayQA MCP is a Model Context Protocol server that gives your AI coding agent accessibility and design-QA superpowers. Ask Claude Code, Cursor, or Windsurf to audit any URL for WCAG and color-contrast issues, then file dev-ready issues straight into your OverlayQA projects, without leaving your editor.

You:   Scan staging.acme.com for accessibility issues, then open issues for the criticals.
Agent: scan_accessibility → 7 violations (2 critical, 3 high), score 71/100.
       scan_and_create_issues → created 2 issues in "Acme Web":
       - Buttons missing accessible names (WCAG 4.1.2) — critical
       - Insufficient text contrast on .cta (WCAG 1.4.3) — high
You:   List the open criticals.
Agent: list_issues(status=open, severity=critical) → 2 issues.

Install

One click:

Or add it to your editor's MCP config manually:

Claude Code (.mcp.json in your project root) / Cursor (~/.cursor/mcp.json) / Windsurf (~/.codeium/windsurf/mcp_config.json):

{
  "mcpServers": {
    "overlayqa": { "command": "npx", "args": ["@overlayqa/mcp@latest"] }
  }
}

Any MCP-compatible client works the same way. On first run a browser tab opens to connect your OverlayQA account (free, no card). The token caches at ~/.overlayqa/auth.json for 30 days.

Tools

Ten tools your agent can call. Each is written so the model picks the right one from natural language.

Audit

ToolWhat it does
scan_accessibilityRun a WCAG audit (axe-core) on any URL. Returns violations with severity, WCAG success criteria, and an overall score.
scan_contrastCheck color-contrast ratios across a page. Returns the failing foreground/background element pairs.
audit_tokensAudit a live URL's design-system tokens. Returns a 0-100 token-health score and findings (inconsistent font sizes, text colors, spacing, font families, border radii) with severity. Audits the live page only.

File and manage issues

ToolWhat it does
scan_and_create_issuesScan a URL and auto-create an issue for every violation above a severity threshold.
create_issueFile a QA issue with title, severity, type, and description.
list_issuesList issues in a project, filtered by status and severity.
update_issueChange an issue's status (open, in-progress, resolved, verified or closed), for example to mark it resolved after you fixed it. Takes the issue id or its display id such as OQ-12.
create_projectCreate a project for a site URL.
list_projectsList all projects on your team.

Coming soon

ToolWhat it does
compare_visualCompare a live page against a Figma frame.

What the server records

Every tool also accepts an optional context argument: one sentence on why the agent is calling it. OverlayQA records that sentence, the tool name, your account, project and issue ids, counts and scores, the URL a scan runs on, and your editor's name and version (from the MCP handshake) as product analytics. The sentence is capped and stripped of email addresses and credential-like strings before it is stored. Nothing else travels: not your conversation, not your code, not the tool's replies. Full detail: overlayqa.com/privacy.

Example prompts

  • "Scan example.com for accessibility issues."
  • "Check the contrast on our pricing page and tell me what's failing."
  • "Scan staging.acme.com and create issues for anything critical or high."
  • "Create a high-severity accessibility issue: the login button has no focus ring."
  • "List the open critical issues in the Acme Web project."
  • "Create a project for shop.acme.com, then scan it."

Pricing

ScansCreate issues & projects
Free3 / day, forever—
14-day trial30 / dayyes
Paid10-30 / day by plan, unlimited on Proyes, with export to Linear / Jira / Asana / Notion

See overlayqa.com/pricing.

FAQ

Which editors does it work with? Claude Code, Cursor, Windsurf, and any MCP-compatible client (it speaks standard stdio MCP).

Is it free? Yes to start: 3 accessibility/contrast scans per day with no card. A 14-day trial raises that to 30 scans per day and unlocks issue and project creation. After that, creating issues and projects needs a paid plan (Pro has unlimited scans).

What does it actually scan? Any public URL. Accessibility uses axe-core mapped to WCAG success criteria; contrast checks foreground/background ratios and returns the failing element pairs.

Do I need an account? Yes, a free OverlayQA account. On first run a browser tab opens to connect it; the token caches locally for 30 days.

Does it work with the OverlayQA Chrome extension? Yes. The MCP server and the extension share the same projects and issues, so anything you file from your editor shows up in the extension and the dashboard, and vice versa.

Prefer clicking to typing? Meet the extension

The MCP server is one way into OverlayQA. The Chrome extension is the other: click any element on a live page and it captures a screenshot plus the CSS, DOM, and metadata into a dev-ready issue in seconds, and runs AI accessibility and design-system audits right on the page. Same projects, same issues, shared with this server.

Links

License

MIT