@overlayqa/mcp

OverlayQA 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:

• Install in Cursor
• Install in VS Code

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

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

Audit

Tool	What it does
scan_accessibility	Run a WCAG audit (axe-core) on any URL. Returns violations with severity, WCAG success criteria, and an overall score.
scan_contrast	Check color-contrast ratios across a page. Returns the failing foreground/background element pairs.
audit_tokens	Audit 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

Tool	What it does
scan_and_create_issues	Scan a URL and auto-create an issue for every violation above a severity threshold.
create_issue	File a QA issue with title, severity, type, and description.
list_issues	List issues in a project, filtered by status and severity.
create_project	Create a project for a site URL.
list_projects	List all projects on your team.

Coming soon

Tool	What it does
compare_visual	Compare a live page against a Figma frame.

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

	Scans	Create issues & projects
Free	3 / day, forever	—
14-day trial	30 / day	yes
Paid	10-30 / day by plan, unlimited on Pro	yes, 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

• Website: overlayqa.com
• Chrome extension: Chrome Web Store
• Free accessibility checker (no account): overlayqa.com/accessibility-checker
• Free color-contrast checker (no account): overlayqa.com/color-contrast-checker
• Pricing: overlayqa.com/pricing
• Model Context Protocol: modelcontextprotocol.io

License

MIT