@overlayqa/mcp

OverlayQA MCP

Give your AI coding agent eyes for accessibility and design QA. 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 and open issues for anything critical.
Agent: Found 7 violations (2 critical, 3 high). Created 5 issues in "Acme Web".
       - Buttons missing accessible names (4.1.2) — critical
       - Insufficient contrast on .cta (1.4.3) — high
       ...

Quickstart

Add OverlayQA to your editor's MCP config. Takes about 30 seconds.

Claude Code (.mcp.json in your project root):

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

Cursor (~/.cursor/mcp.json):

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

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.

What your agent can do

Tool	What it does
scan_accessibility	Run a WCAG audit on any URL. Returns violations with severity, WCAG criteria, and an overall score.
scan_contrast	Check color-contrast ratios across a page. Returns the failing element pairs.
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, with optional status and severity filters.
create_project	Create a project for a site URL.
list_projects	List all projects on your team.
compare_visual	Compare a live page against a Figma frame. (coming soon)
audit_tokens	Audit a page's design tokens against a Figma file. (coming soon)

Try these prompts

• "Scan example.com for accessibility issues."
• "Check the contrast on our pricing page and tell me what's failing."
• "Scan my staging site and create issues for anything critical or high."
• "Create a high-severity issue: the login button has no focus ring."
• "Show me all open accessibility issues in the Acme project."

Pricing

	Scans	Create issues & projects
Free	3 / day, forever	—
14-day trial	unlimited	yes
Paid	unlimited	yes + exports to Linear / Jira / Asana / Notion

See overlayqa.com/pricing.

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. It shares the same projects and issues as this MCP server, so an issue you file from your editor shows up there too, and vice versa.

Links

• Website: overlayqa.com
• Free accessibility checker (no account): overlayqa.com/accessibility-checker
• Pricing: overlayqa.com/pricing

License

MIT