An astronaut overseeing a futuristic data hub
Download PDFMarkdown Version

Connect WCAG Contrast Checker to ChatGPT, Claude and Gemini

Set it up once and it works in ChatGPT, Claude, Cursor, and any other client you love. It all runs safely in the background, so you can relax and focus on what really matters. Verify color accessibility and fix contrast issues instantly.

Ask AI about this Connector

Developed, maintained, and hosted by Vinkius.

MCP VERIFIED · PRODUCTION READY · VINKIUS GUARANTEED

Waiting for input…

Works with modern AI clients that support MCP, including ChatGPT, Claude, Cursor, and more.

ChatGPTClaudeCursorPerplexityGeminiMicrosoft CopilotRaycastMeta AI

Your AI does the work. We keep it safe and sound.

No other AI tool gives you this. Your workflow runs in the client you already love, your account stays protected, and you decide what the agent can and cannot do. It is the whole reason to make the switch.

Each Connector lives inside our infrastructure, the same place where your workflow runs. The three things below are already part of it, working quietly in the background so you never have to think about them. Nothing to add, nothing to set up, nothing to worry about.

A futuristic MCP client docking bay
V8 Isolate01

Each Connector runs inside its own sealed environment.

Each Connector runs inside its own sealed V8 runtime — no access to your files, your system, or other servers. A Connector never sees past its own request.

Kill Switch02

One switch stops every agent. Instantly.

One action deactivates every Connector, revokes every token, and ends every session at once. AI Governance keeps the record.

FinOps per User03

Spending limits that pause instead of surprise.

Every user keeps their own connections and credentials, isolated from everyone else. Anything that would cross your spending limit is held for your approval, not billed.

Three controls, built into the layer your AI connects through.

Curated set · 3 capabilities

We ship only the actions that matter.

Capability set01 / 01

01-03

3 capabilities in this set.

Part of 3 available through WCAG Contrast Checker.

  1. 01

    Find compliant suggestion

    This capability suggests a new background color by minimally adjusting lightness to hit a specific accessibility target.

  2. 02

    Audit palette

    This capability validates an entire collection of colors to ensure they all meet a chosen accessibility standard.

  3. 03

    Calculate contrast

    This capability determines the exact contrast ratio and pass/fail status for two specific colors using WCAG 2.1 and APCA models.

Real work

What teams actually run

01

CSS Debugging

Check if your text color and background color meet AA standards while writing code.

02

Design System Creation

Audit a new set of brand colors to ensure they work for all users.

03

Compliance Audits

Verify that an existing UI meets specific WCAG 2.1 or APCA requirements.

04

Rapid Prototyping

Get compliant color suggestions instantly when a design fails a check.

One connector, every AI

WCAG Contrast Checker works with the most popular AI clients.

These are the most popular clients, each with a step-by-step guide: one link, set up once, with governance and visibility built in. And because everything runs on the MCP standard, the same connection also works in any other compatible client — nothing to rebuild.

ClaudeClaudeChatGPTChatGPTGeminiGeminiPerplexityPerplexityGrokGrokMicrosoft CopilotMicrosoft CopilotCursorCursorVS CodeVS CodeWindsurfWindsurfJetBrainsJetBrainsClineClineLangChainLangChainVercel AI SDKVercel AI SDKLovableLovableZ.aiZ.aiRaycastRaycastQwen CodeQwen CodeKimi CodeKimi CodeLe ChatLe Chat

Building your own app? The connector is yours to use.

You don't need a client to put WCAG Contrast Checker to work: the same hosted connection plugs into your own applications and agent code, with the same governance on every request. Build with it, chat with it — one connection for both.

Observed, not estimated

736ms average. Fast in production.

WCAG Contrast Checker is checked daily against the live service.

Daily averagePeak 951ms
Oct 3Today
Fastest day
550ms
Slowest day
951ms
14-day trend
Slowing+16%

Connect your client

One URL. Every client.

Activate the Connector, copy your link, and paste it into the client you already use. 3 capabilities arrive ready to run.

Preview access · not provider authentication

The vk_preview_* token belongs to Vinkius preview infrastructure. It lets Claude discover and display the capabilities of WCAG Contrast Checker, so you can see the experience inside your AI.

It does not authenticate your account with WCAG Contrast Checker. Actions requiring credentials or live account data may not run until you activate the Connector and authorize the service.

WCAG Contrast Checker Connector

You're all set. Choose your MCP client and follow the setup instructions.

Connector linkhttps://edge.vinkius.com/vk_preview_Lfv8VqyLJIKyGy3fae9w4KOMmwDTCPhqWj1LLrE1/mcp

Claude Desktop

Follow the steps below to connect in seconds.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — WCAG Contrast Checker capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "wcag-contrast-checker-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_Lfv8VqyLJIKyGy3fae9w4KOMmwDTCPhqWj1LLrE1/mcp"
    }
  }
}
  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Step-by-step instructions for each client are in the guide. How to connect

Guided setup for Claude? Set up WCAG Contrast Checker in Claude and other AIs

See all the AI clients this connector works with ↑

Who it's for

Built for the work WCAG Contrast Checker owners hand off.

This MCP is built for developers and designers who need to bake accessibility into their workflow without leaving their IDE.

  • 01

    Frontend Developers

    They hand off hex code pairs to the AI to verify CSS compliance.

  • 02

    UI/UX Designers

    They use the capability to validate color palettes before handing off designs.

  • 03

    Accessibility Specialists

    They use it to run quick audits on existing component libraries.

FAQ

Questions WCAG Contrast Checker owners ask.

  • 01

    Does this MCP support WCAG 3.0?

    Yes, it uses the APCA model which is the basis for WCAG 3.0 accessibility testing.

  • 02

    Can I check multiple colors at once?

    Yes, you can use the audit_palette capability to validate an entire collection of colors against a standard.

  • 03

    How does it suggest new colors?

    The find_compliant_suggestion capability adjusts the lightness of a color to find the closest match that meets your target accessibility level.

  • 04

    Which AI clients can use this?

    You can use this MCP with any compatible client, including Claude, Cursor, Windsurf, and VS Code.

  • 05

    What is the difference between WCAG 2.1 and APCA?

    WCAG 2.1 uses specific contrast ratios, while APCA is the newer model used for WCAG 3.0 to better reflect how humans perceive contrast.

  • 06

    What standards does this capability support?

    The capability supports WCAG 2.1 (Contrast Ratio) and WCAG 3.0 (APCA - Advanced Perceptual Contrast Algorithm).

  • 07

    How can I find a color that passes AA standards?

    You can use the find_compliant_suggestion capability. Provide your current color and specify 'AA_NORMAL' as the target level.

Explore

More in Web Development

Suggestions

Connect WCAG Contrast Checker to Claude, Cursor, ChatGPT & more