Color Accessibility Engine Connector for AI agents.
3 live capabilities
Automate WCAG compliance and perceptual color science
Waiting for input…
Why people use Color Accessibility Engine
Fixing WCAG accessibility issues with Color Accessibility Engine
With this MCP, that loop disappears. You just hand your hex codes to your agent, and it tells you exactly where you stand with WCAG 2.1. You get the math done instantly, so you can get back to actual designing instead of playing calculator.
What Vinkius changes
You get mathematically accurate color science results directly through your AI chat.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 6,100+ Connectors
- Real-world use case 01
Fixing low-contrast text
A developer realizes their brand blue is unreadable on a light background and asks their agent to find a compliant alternative.
- Real-world use case 02
Creating brand palettes
A designer needs a set of analogous colors that all feel like they have the same 'weight' and brightness.
- Real-world use case 03
Validating color changes
A product owner wants to know if changing a button from navy to royal blue is actually noticeable to users.
Complete set · 3capabilities
The complete Color Accessibility Engine capability set.
These are the exact actions your AI can choose when you ask it to work with Color Accessibility Engine.
01—03
3 capabilities in this set.
Part of 3 available through Color Accessibility Engine.
- 01 Capability
Analyze color accessibility
Checks if a base color meets WCAG 2.1 AA or AAA standards against black and white. It tells you exactly if your text is readable.
- 02 Capability
Compare colors perceptually
Calculates the visual difference between two colors using the Delta-E formula. It measures how much the human eye actually notices a change.
- 03 Capability
Generate perceptual palettes
Creates color harmonies like triadic or analogous sets using LCH math. It keeps lightness and saturation consistent across the whole palette.
Set up in minutes
One URL. Then ask Color Accessibility Engine to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Color Accessibility Engine 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_69twE5mr5OOuWaSLhME69S8laGT4gfJyOHshUGv3/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 Color Accessibility Engine, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable Color Accessibility Engine for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_69twE5mr5OOuWaSLhME69S8laGT4gfJyOHshUGv3/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 Color Accessibility Engine URL.
- Step 03
Save and start
Save the connection and enable Color Accessibility Engine in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"color-accessibility-engine": {
"url": "https://edge.vinkius.com/vk_preview_69twE5mr5OOuWaSLhME69S8laGT4gfJyOHshUGv3/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 Color Accessibility Engine
Open Agent mode in chat and ask: "Using Color Accessibility Engine, help me...". 3 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"color-accessibility-engine": {
"url": "https://edge.vinkius.com/vk_preview_69twE5mr5OOuWaSLhME69S8laGT4gfJyOHshUGv3/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 Color Accessibility Engine
Ask Copilot: "Using Color Accessibility Engine, help me...". 3 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"color-accessibility-engine": {
"url": "https://edge.vinkius.com/vk_preview_69twE5mr5OOuWaSLhME69S8laGT4gfJyOHshUGv3/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 Color Accessibility Engine
Open Cascade and ask: "Using Color Accessibility Engine, help me...". 3 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"color-accessibility-engine": {
"url": "https://edge.vinkius.com/vk_preview_69twE5mr5OOuWaSLhME69S8laGT4gfJyOHshUGv3/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 Color Accessibility Engine
Ask Cline: "Using Color Accessibility Engine, help me...". 3 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add color-accessibility-engine --transport http "https://edge.vinkius.com/vk_preview_69twE5mr5OOuWaSLhME69S8laGT4gfJyOHshUGv3/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 Color Accessibility Engine
Ask Claude: "Using Color Accessibility Engine, show me...". 3 tools are ready
Where the request belongs
Work Color Accessibility Engine can move forward.
This is for anyone building digital products where color matters, specifically those who need to balance aesthetics with strict accessibility requirements.
UI/UX Designer
Building cohesive color systems and ensuring brand colors work for all users.
Frontend Developer
Checking contrast ratios and generating CSS color variables that meet WCAG standards.
Accessibility Specialist
Auditing color palettes to ensure they pass legal and usability requirements.
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse ConnectorsChuangkit / 创客贴
Leading graphic design platform in China. manage templates, materials, and designs via AI.
Color Format Converter
Convert between HEX, RGB(A), HSL(A), HSV, and CMYK with precision.
Heading Structure Validator
Validates HTML heading hierarchy, keyword presence, and semantic density.
Microcopy UX Friction Analyzer
Audit UX microcopy for clarity, friction, and actionability.
X Ads (Twitter)
Connect your X Ads account to any AI agent. audit campaigns, analyze line item performance, and pull engagement reports through natural conversation.
Box
Store, share, and collaborate on files securely with enterprise-grade cloud content management and governance controls.
Bring your own AI
Change the model, client or framework. Keep Color Accessibility Engine 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 Color Accessibility Engine.
The practical details behind the request, access and result.
How can I check WCAG compliance with Color Accessibility Engine?
You can simply ask your agent to check a specific hex code. It will compare your color against black and white benchmarks and tell you if it passes AA or AAA standards.
Can I use Color Accessibility Engine to make color palettes?
Yes. You can ask for complementary, triadic, or analogous palettes. It uses LCH color space to make sure the colors look balanced and not desaturated.
Does Color Accessibility Engine work with my existing design capabilities?
It works through your AI client. Once you connect it via Vinkius, you can use it inside Claude, Cursor, or VS Code to get color data without leaving your workflow.
What is the difference between RGB and the LCH math used here?
RGB is based on how screens work, while LCH is based on how humans actually see. This MCP uses LCH to ensure colors in a palette feel like they have the same brightness and intensity.
How accurate are the color difference measurements in Color Accessibility Engine?
The measurements are highly accurate because they use the CIEDE2000 Delta-E formula, which is the industry standard for calculating how much two colors differ to the human eye.
How does this engine ensure color palettes look good?
The engine uses the LCH (Lightness, Chroma, Hue) color space instead of HSL. This ensures that when you shift hues, the perceived lightness and saturation remain constant, avoiding muddy colors.
Can I check if my brand color is accessible?
Yes. By using calculate_accessibility, you can check if your base HEX color meets WCAG 2.1 AA or AAA standards for both normal and large text against pure black and white.
What is Delta-E?
Delta-E is a metric used to quantify the difference between two colors. This engine uses the CIEDE2000 formula to provide a value that matches how humans actually perceive color differences.
One connection away
Give your agent a direct line to Color Accessibility Engine.
Connect Color Accessibility Engine once. Keep it beside 6,100+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available