An astronaut overseeing a futuristic data hub
Download PDFMarkdown Version

Connect Color 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 WCAG compliance without leaving your editor.

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 · 8 capabilities

We ship only the actions that matter.

Capability set01 / 02

01-04

4 capabilities in this set.

Part of 8 available through WCAG Color Contrast.

  1. 01

    Check black text on bg

    This capability checks how pure black text performs against a specific background color.

  2. 02

    Check color contrast

    Use this to get the exact WCAG contrast ratio for any specific foreground and background color pair.

  3. 03

    Check dark mode surface

    This capability validates contrast against a standard dark mode surface.

  4. 04

    Check text on pure white

    This capability measures the contrast of a text color when placed on a pure white background.

Capability set02 / 02

05-08

4 capabilities in this set.

Part of 8 available through WCAG Color Contrast.

  1. 05

    Check white text on bg

    This capability tests the readability of pure white text against a custom background color.

  2. 06

    Check danger text contrast

    Use this to verify if standard red error text is legible on a given background.

  3. 07

    Check light mode surface

    This capability checks contrast levels against a standard light mode surface.

  4. 08

    Check text on pure black

    This capability calculates the contrast ratio for text colors on a pure black background.

Real work

What teams actually run

01

Design System Audits

Check if your primary brand colors meet accessibility standards for all UI elements.

02

Dark Mode Implementation

Ensure text remains readable when switching from light to dark themes.

03

Error Message Legibility

Verify that red error text is visible enough for users to read on various backgrounds.

04

Rapid Prototyping

Quickly test hex code combinations as you build new interface components.

Automate a task

Put WCAG Color Contrast to work on one thing.

Step-by-step automations your AI runs through this Connector: the workflow, the prompts to start with, and the exact capabilities behind each move.

One connector, every AI

WCAG Color Contrast 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 Color Contrast 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

957ms average. Fast in production.

WCAG Color Contrast is checked daily against the live service.

Daily averagePeak 1115ms
Oct 3Today
Fastest day
786ms
Slowest day
1115ms
14-day trend
Stable-3%

Connect your client

One URL. Every client.

Activate the Connector, copy your link, and paste it into the client you already use. 8 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 Color Contrast, so you can see the experience inside your AI.

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

WCAG Color Contrast Connector

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

Connector linkhttps://edge.vinkius.com/vk_preview_ToTQpdJuObTgdPgJyLWHlH7B6StfiSmankHl08eC/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 Color Contrast capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopy
{
  "mcpServers": {
    "color-contrast-checker-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_ToTQpdJuObTgdPgJyLWHlH7B6StfiSmankHl08eC/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 Color Contrast in Claude and other AIs

See all the AI clients this connector works with ↑

Who it's for

Built for the work WCAG Color Contrast owners hand off.

This MCP is built for professionals who need to bake accessibility into their digital products without breaking their flow.

  • 01

    UI/UX Designers

    They ask the agent to validate design system tokens against accessibility rules.

  • 02

    Web Developers

    They use the agent to check contrast ratios directly within their coding environment.

  • 03

    Accessibility Auditors

    They use the agent to batch verify color compliance across large sets of components.

FAQ

Questions WCAG Color Contrast owners ask.

  • 01

    How do I use this MCP with Claude?

    Once you subscribe on Vinkius, you can connect it to Claude. Your agent will then have access to the contrast checking capabilities automatically.

  • 02

    What accessibility standards does it follow?

    The MCP checks color combinations against WCAG AA and AAA standards.

  • 03

    Do I need to provide hex codes?

    Yes, you can provide specific hex codes for foreground and background colors to get precise results.

  • 04

    Can it check dark mode specifically?

    Yes, there are specific capabilities to check contrast against standard dark mode surfaces.

  • 05

    Does this work in VS Code?

    Yes, any MCP-compatible client like VS Code can use these capabilities once connected via Vinkius.

  • 06

    What accessibility standards does it check?

    It checks against both WCAG 2.1 Level AA (minimum 4.5:1 for normal text, 3:1 for large text) and Level AAA (7:1 for normal text, 4.5:1 for large text).

Explore

More in Developer Tools

Suggestions

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