colord Connector for AI agents.
1 live capability
Verify WCAG 2.1 accessibility compliance for your web UI colors.
Waiting for input…
Why people use colord
Color Contrast Checker for WCAG 2.1 Accessibility Audits
With this Connector, your agent does the math for you. Just describe the colors you are using, and it returns the exact contrast ratio, the pass/fail status for different text sizes, and a clear verdict. It turns a multi-click process into a single chat command.
What Vinkius changes
You get mathematically accurate accessibility data without the AI making up the numbers.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 5,900+ Connectors
- Real-world use case 01
Checking button readability
A developer wants to know if white text on a specific blue button is readable.
- Real-world use case 02
Validating subtle labels
A designer wants to ensure a subtle gray label is accessible.
- Real-world use case 03
Meeting legal AAA requirements
A legal team requires AAA compliance for a government site.
Complete set · 1capability
The complete colord capability set.
These are the exact actions your AI can choose when you ask it to work with colord.
01
1 capability in this set.
Part of 1 available through colord.
- 01 Capability
Check color contrast
Pass two colors in any format to get the exact contrast ratio and WCAG 2.1 pass/fail status. It provides a clear verdict for both normal and large text.
Set up in minutes
One URL. Then ask colord to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use colord from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it colord, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable colord for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the colord URL.
- Step 03
Save and start
Save the connection and enable colord in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"color-contrast-checker-alternative": {
"url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
}
}
}- Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using colord
Open Agent mode in chat and ask: "Using colord, help me...". 1 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"color-contrast-checker-alternative": {
"url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
}
}
}- Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using colord
Ask Copilot: "Using colord, help me...". 1 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"color-contrast-checker-alternative": {
"url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
}
}
}- Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using colord
Open Cascade and ask: "Using colord, help me...". 1 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"color-contrast-checker-alternative": {
"url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
}
}
}- Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using colord
Ask Cline: "Using colord, help me...". 1 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add color-contrast-checker-alternative --transport http "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"- Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using colord
Ask Claude: "Using colord, show me...". 1 tools are ready
Where the request belongs
Work colord can move forward.
This is for the front-end developer who hates manual accessibility audits and the UI designer who needs to guarantee their color palette works for everyone.
Front-end Developer
Checking if a new button style passes WCAG standards before pushing code to production.
UI/UX Designer
Validating brand colors for web components to ensure they meet AA requirements during the mock-up phase.
Accessibility Auditor
Verifying large batches of color combinations for compliance reports and design system documentation.
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse ConnectorsColor Contrast Checker
Check WCAG color contrast compliance via AI. verify text readability against backgrounds for accessible, inclusive web design.
Deterministic Color Engine
Equip your AI with precise UI design capabilities. Deterministically convert HEX/RGB/HSL, manipulate luminance, and generate mathematically perfect palettes.
Color Converter Engine
Convert any color between HEX, RGB, HSL, and CMYK with mathematical precision. The AI guesses color codes. this engine knows them.
WCAG Contrast Checker
Evaluate color contrast compliance against WCAG 2.1 and WCAG 3.0 (APCA) standards.
Color Difference Engine
Calculate perceptual color differences using CIE76, CIEDE2000, and OKLAB models.
Color Format Converter
Convert between HEX, RGB(A), HSL(A), HSV, and CMYK with precision.
Bring your own AI
Change the model, client or framework. Keep colord connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about colord.
The practical details behind the request, access and result.
Can the Color Contrast Checker MCP help me meet WCAG standards?
Yes, it calculates the exact contrast ratios required for WCAG 2.1 AA and AAA compliance. It tells you immediately if your text is readable enough for different sizes.
Does Color Contrast Checker MCP work with HEX and RGB codes?
It works with HEX, RGB, HSL, and CSS named colors. You can just paste whatever format your design capability gives you.
How does Color Contrast Checker MCP prevent AI mistakes?
AI models often struggle with precise math. This Connector uses the official W3C relative luminance formula to provide accurate numbers instead of a guess.
Can I use Color Contrast Checker MCP for large headings?
Yes, it checks both normal text and large text requirements. It helps you ensure that headers meet the lower 3:1 ratio while body text hits the 4.5:1 mark.
What kind of verdict does Color Contrast Checker MCP give?
It provides clear labels like Excellent (AAA), Good (AA), or Fail. This helps you quickly identify which colors need to be adjusted without looking at a table of numbers.
Is Color Contrast Checker MCP good for web accessibility?
It is a core capability for web accessibility. It helps developers and designers verify that their UI is usable for people with low vision or color blindness.
My AI says this color combination passes WCAG. Should I trust it?
No. LLMs cannot reliably calculate relative luminance. they approximate. This engine uses the exact W3C formula: L = 0.2126R + 0.7152G + 0.0722*B with sRGB gamma correction. Trust the math, not the prediction.
What's the difference between AA and AAA levels?
AA requires 4.5:1 contrast for normal text. the legal minimum in most countries. AAA requires 7:1. the gold standard for maximum readability. Large text (18pt+) has relaxed thresholds: 3:1 for AA, 4.5:1 for AAA.
Can I mix color formats? Like HEX for foreground and a CSS name for background?
Absolutely. Pass '#333333' as foreground and 'white' as background, or 'rgb(0,0,0)' with 'hsl(0,0%,95%)'. the engine normalizes everything internally.
One connection away
Give your agent a direct line to colord.
Connect colord once. Keep it beside 5,900+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available