Color Contrast Checker MCP for AI. Pass WCAG contrast checks instantly.

Q: Can I check contrast ratios in dark mode using this MCP?

Yes, you can. Use the dedicated checkdarkmodesurface tool to ensure your text looks good against standard dark theme backgrounds. This is critical for mobile design.

Q: What if I need to check a color on an unusual background?

Use checkcolorcontrast. Simply provide the two colors you are working with, and it handles any custom hex code pair for validation.

Q: What color format must I provide when using checktextonpurewhite?

You need to supply standard hex codes, like RRGGBB. The tool accepts both six-digit and eight-digit formats for the background or text colors. Providing a precise code ensures accurate ratio calculation.

Claude

ChatGPT

Cursor

Gemini

Windsurf

VS Code

JetBrains

Vercel

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

Connect to your AI in seconds.

Color Contrast Checker validates WCAG accessibility compliance for any color combination. It runs contrast ratios between foreground and background colors to confirm text readability, whether you're designing a dark mode UI or just checking black on white.

Get instant pass/fail reports required by design standards.

What your AI can do

Check black text on bg

Checks the contrast ratio of pure black text against a specific background color you input.

Check color contrast

Calculates the WCAG contrast ratio between any two custom foreground and background colors for accessibility auditing.

Check danger text contrast

Checks how readable standard error or danger red text is against a specific background color.

+ 5 more capabilities included

Audit specific color pairs

It calculates the exact WCAG contrast ratio for any foreground and background hexadecimal color code.

Validate standard modes

Checks text readability against industry standards for light mode or dark mode surfaces.

Test extreme backgrounds

Confirms contrast ratios when the background is pure black or pure white.

Check common elements

Runs checks for standard text colors, like black body copy or error red, against a given background.

Ask an AI about this

Included with Plan

Waiting for input…

AI Agent

Color Contrast Checker: 8 Tools

These eight tools give you granular control, letting you check specific scenarios like pure white on black or standard dark mode surfaces.

Make your AI actually useful.

Add this MCP to Claude, Cursor, or Windsurf and your AI stops guessing. It gets real tools to look things up, take action, and handle the stuff you keep doing by hand.

Start using Color Contrast Checker on Vinkius

Check Black Text On Bg

Checks the contrast ratio of pure black text against a specific background color you input.

Check Color Contrast

Calculates the WCAG contrast ratio between any two custom foreground and background...

Check Danger Text Contrast

Checks how readable standard error or danger red text is against a specific...

Check Dark Mode Surface

Validates contrast ratios using the established color scheme for dark mode...

Check Light Mode Surface

Checks color combinations against the standard background and text colors used in...

Check Text On Pure Black

Determines the contrast ratio of a selected text color when placed on a pure black background.

Check Text On Pure White

Checks how readable a chosen text color is when set against a pure white background.

Check White Text On Bg

Calculates the contrast ratio of pure white text placed over a specific, custom...

Security and governance baked right in.

Pick your AI client below to get set up. Just create a Vinkius account, subscribe, and you're instantly up and running. We handle the entire backend infrastructure, delivering out-of-the-box support for HTTPS Streamable, SSE, and OAuth2—zero messy routing required.

Claude AI

Open Claude Settings

Go to claude.ai, click your profile icon, then navigate to Customize → Connectors.

Add Custom Connector

Click the "+" button and select Add custom connector. Paste your Vinkius endpoint URL:

https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp

Replace [YOUR_TOKEN_HERE] with your token from cloud.vinkius.com. For OAuth-protected servers, expand Advanced settings to add credentials.

Start a conversation

Open a new chat. The Color Contrast Checker integration is available immediately — no restart needed.

Antigravity

Configure Agent Environment

Open your Antigravity agent's workspace configuration or mcp-servers.json file.

Bind the Endpoint

Add the Vinkius endpoint URL to your agent's MCP connections list:

"mcp_servers": {
  "color-contrast-checker": {
    "serverUrl": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
  }
}

Provide your secure token in place of [YOUR_TOKEN_HERE] to ensure your agent requests are authenticated.

Execute

Start your Antigravity session. The agent will autonomously discover and utilize the Color Contrast Checker tools with full Vinkius guardrails applied.

VS Code Copilot

⚡

One-Click Install (Recommended)

In your Vinkius Dashboard, simply click the Add to VS Code button for this server. We'll automatically configure your local workspace.

Or configure manually

Open MCP Settings

Open VS Code, press Ctrl/Cmd + Shift + P, and search for GitHub Copilot: MCP Servers.

Add Server Config

Add the Vinkius endpoint configuration to your mcp-servers.json file:

"color-contrast-checker": {
  "url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
}

Ensure you replace [YOUR_TOKEN_HERE] with your token from cloud.vinkius.com.

LangChain

Install Dependencies

Install the LangChain MCP adapters for your environment:

pip install langchain-mcp-adapters

Connect the Server

Use the SSEClient in LangChain to connect to the Vinkius managed endpoint:

from langchain_mcp_adapters.client import SSEClient

# Connect to Vinkius
client = SSEClient(url="https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp")
tools = client.get_tools()

CrewAI

Define the Tool

Load the Vinkius MCP tools into your CrewAI agents:

from crewai import Agent
from mcp_crewai import MCPTool

# Connect securely to Vinkius
vinkius_tools = MCPTool(url="https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp")

# Assign to Agent
researcher = Agent(
    role='Data Researcher',
    tools=vinkius_tools.get_all()
)

Execute Task

Run your CrewAI process. The agent will autonomously route tasks to the Vinkius managed server.

Choose How to Get Started

Build a custom MCP for your own tools, or connect a ready-made integration from our catalog.

Build Your Own

Turn any API into an MCP. Import a spec, define Agent Skills, or deploy with MCPFusion.

Import from OpenAPI, Swagger, or YAML specs
Create Agent Skills with progressive disclosure
Deploy to edge with MCPFusion framework
Built in DLP, auth, and compliance on every call
Real time usage dashboard and cost metering
Publish to catalog or keep private

Start building

Make Your AI Do More

Start with Color Contrast Checker, then connect any of our 5,100+ other servers whenever your AI needs more. One click, no limits.

Use this MCP plus 5,100+ others, all in one place
Add new capabilities to your AI anytime you want
Every connection is secured and compliant automatically
Track usage and costs across all your servers
Works with Claude, ChatGPT, Cursor, and more
New servers added to the catalog every week

Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by WCAG Color Contrast. All third-party trademarks, logos, and brand names are the property of their respective owners. Their use on this website is strictly for informational purposes to identify service compatibility and interoperability.

VINKIUS INFRASTRUCTURE

Cloud Hosted

Managed infra

V8 Isolated

Sandboxed per request

Zero-Trust Proxy

No stored credentials

DLP Enforced

Policy on every call

GDPR Compliant

EU data residency

Token Compression

~60% cost reduction

Your data is protected. See how we built it.

Works with Claude, ChatGPT, Cursor, and more

The Model Context Protocol standardizes how applications expose capabilities to LLMs. Instead of operating in isolation, your AI gains direct access to external platforms, live data, and real-world actions through secure, standardized connections.

This connection provides 8 powerful capabilities that interface natively with Claude, ChatGPT, Cursor, and other compatible AI platforms. No middleware. No custom integration required.

Color accessibility failures happen fast.

Today, checking contrast is a manual headache. You pick two colors in your editor, open another browser tab with a WCAG calculator, input the hex codes, and wait for the ratio to show up. This process of copy-pasting numbers across different tools slows down every design iteration.

With this MCP, you tell your agent which colors need checking—say, blue body text on an off-white background. The system runs all necessary calculations instantly and returns a clear pass/fail report with the exact ratio. You get technical proof, not just a guess.

Color Contrast Checker: Instant WCAG Validation

The biggest time sink disappears when you don't have to switch between a design tool and an external calculator. You can check the readability of pure white text on a dark surface, or verify if your primary CTA button color works with `check_color_contrast`, all without leaving your coding environment.

It means compliance isn't something you 'hope' for; it's built into the workflow. Your agent gives you the definitive answer right when you need it.

Support 24/7 support@vinkius.com ↗

Security Vinkius Trust Center ↗

SLA Service Level Agreement ↗

Report Listing Send Report ↗

What your AI can actually do with this

Designers and developers need to know if their chosen colors are actually readable. This MCP lets your agent check the contrast ratio for any pair of foreground and background colors, validating against WCAG AA and AAA standards. You can test custom pairs, or quickly run checks for standard scenarios like white text on a specific color.

It verifies readability across light themes, dark themes, pure black backgrounds, and pure white backgrounds. If you're building a design system, this MCP saves time by giving instant pass/fail reports without needing to leave your development environment. You connect it through Vinkius to access thousands of other tools alongside the contrast checker.

Built · Hosted · Managed by Vinkius Color Contrast Checker - Audit WCAG Readability

Server ID 019d84b6-78c1-73a4-9047-2c047c74afe2

Vinkius Inspector

Compliance Grade A+

Score 100/100

Report View Report ↗

Who is this actually for?

This MCP is built for people who build digital interfaces and must meet legal accessibility standards. It helps UI/UX designers who can't afford to ship designs that are hard to read, and web developers who need fast, accurate contrast numbers right inside their coding workflow.

UI/UX Designer

Needs to validate a new color palette against WCAG standards before handoff. Uses the MCP to check if primary brand colors maintain enough contrast when placed on secondary backgrounds.

Front-End Developer

Must verify that the text color used for an error message (like red) passes contrast checks against the page background before committing code. Uses specialized tools like check_danger_text_contrast.

Accessibility Auditor

Needs to batch-verify dozens of design tokens across a large application, confirming that both light and dark mode color schemes meet contrast minimums.

What Changes When You Connect

Avoid failing accessibility audits. By using check_color_contrast, you validate any custom color pair against the required AA and AAA standards before a single line of code is written.

Maintain consistency across themes. You can run quick validations for both light and dark designs using dedicated tools like check_light_mode_surface and check_dark_mode_surface to prevent theme-related failures.

Test edge cases reliably. Need to check if a custom blue works on an off-white background? Use the core function, check_color_contrast, instead of guessing or relying on manual color pickers.

Verify critical alerts. Never assume your error state is visible. Tools like check_danger_text_contrast ensure that important messages use colors that pass contrast requirements.

Confirm pure backgrounds. The dedicated tools, such as check_text_on_pure_black, handle the simplest but most overlooked scenarios, making sure basic readability holds up.

See it in action

01 01

The primary brand color needs to be visible in dark mode.

A designer picks a cool accent blue for their app's 'active' state. They ask their agent to use check_dark_mode_surface with the blue and the background hex code. The agent confirms the ratio fails WCAG AA, prompting the developer to pick a darker, more compliant shade.

02 02

Testing contrast for an error message on a custom field.

A web developer builds a form where the error text color is customized. Instead of manually calculating it, they use check_danger_text_contrast with the specific error red and background hex code to guarantee compliance.

03 03

Auditing a large design system's base palette.

An accessibility auditor needs to check if all neutral gray shades pass contrast requirements. They use check_color_contrast multiple times, inputting the gray shade and the pure white background hex code, gathering an instant report for every token.

04 04

Making sure body text is readable on a non-white page.

A content writer uses their agent to verify if their chosen body font color works against a muted beige background. They use check_color_contrast with the specific colors, confirming that pure white or black text won't work.

The honest tradeoffs

Assuming contrast is enough.

Anti-pattern

A developer fixes a low contrast ratio but forgets to check how that color interacts with the dark mode surface, leading to readability issues only visible on certain screens.

The Fix

Fix the main pair using check_color_contrast. Then immediately run supplemental checks like check_dark_mode_surface or check_text_on_pure_black to cover all required viewing contexts.

Only checking black text.

Anti-pattern

A user only runs the basic 'black on white' check. This fails when they implement a custom, dark gray body text color that still falls below WCAG standards.

The Fix

Always use check_color_contrast and input your specific foreground color instead of just relying on black or white.

Ignoring error state colors.

Anti-pattern

The team uses a highly visible, custom 'warning' yellow for alerts. They forget to validate this color combination against the background before deployment.

The Fix

Use check_danger_text_contrast or similar specialized tools to validate non-standard alert colors and ensure they meet minimum contrast ratios.

When It Fits, When It Doesn't

Use this MCP if your job requires confirming color readability against WCAG standards—that’s it. If you only need a general visual suggestion, use a standard design tool. But when you need technical proof that 'blue on yellow' hits 4.5:1, you use the check_color_contrast function. Don't use this if your problem is structural (e.g., poor layout or bad focus states); it only handles color pairs. If you are building a full design system, make sure to run checks for both light and dark mode using their respective tools.

Questions you might have

How do I use check_color_contrast for my brand colors? +

Pass your foreground color and background color hex codes directly to check_color_contrast. The MCP returns the precise contrast ratio, letting you see if it meets WCAG AA or AAA requirements.

Does check_danger_text_contrast work for all error colors? +

No. It checks standard 'danger' red text specifically. For other alert colors (like warning yellow), you must use the more general check_color_contrast tool.

Can I check contrast ratios in dark mode using this MCP? +

Yes, you can. Use the dedicated check_dark_mode_surface tool to ensure your text looks good against standard dark theme backgrounds. This is critical for mobile design.

What if I need to check a color on an unusual background? +

Use check_color_contrast. Simply provide the two colors you are working with, and it handles any custom hex code pair for validation.

How do I connect my API key to run check_color_contrast? +

You must provide an Apify API key for access. Once subscribed, you input this key directly into your AI client's configuration. This lets your agent use all contrast tools immediately without needing manual setup.

What color format must I provide when using check_text_on_pure_white? +

You need to supply standard hex codes, like #RRGGBB. The tool accepts both six-digit and eight-digit formats for the background or text colors. Providing a precise code ensures accurate ratio calculation.

When check_color_contrast fails a test, does it provide recommendations? +

Yes, the output reports the failing contrast ratio and the required minimums based on WCAG standards. It also suggests specific color adjustments or alternative pairings that meet compliance.

If I run many checks using check_dark_mode_surface, are there rate limits? +

Usage is subject to the Apify API rate limits for efficient processing. The MCP handles batch requests well, but if you need extremely high volume checking, review your subscription tier.

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).

Connect to your AI in seconds.

Check black text on bg

Check color contrast

Check danger text contrast

Color Contrast Checker: 8 Tools

Make your AI actually useful.

Check Black Text On Bg

Check Color Contrast

Check Danger Text Contrast

Check Dark Mode Surface

Check Light Mode Surface

Check Text On Pure Black

Check Text On Pure White

Check White Text On Bg

Security and governance baked right in.

Claude AI

Open Claude Settings

Add Custom Connector

Start a conversation

Claude Code

Open your terminal

Add the MCP Server

Start coding

Cursor

One-Click Install (Recommended)

Open Cursor Settings

Add New Server

Use in Composer

Antigravity

Configure Agent Environment

Bind the Endpoint

Execute

VS Code Copilot

One-Click Install (Recommended)

Open MCP Settings

Add Server Config

Windsurf

One-Click Install (Recommended)

Open Windsurf Settings

Add Server Endpoint

LangChain

Install Dependencies

Connect the Server

CrewAI

Define the Tool

Execute Task

Choose How to Get Started

Build Your Own

Make Your AI Do More

Works with Claude, ChatGPT, Cursor, and more

Color accessibility failures happen fast.

Color Contrast Checker: Instant WCAG Validation

What your AI can actually do with this

Here's how it actually works

Who is this actually for?

What Changes When You Connect

See it in action

The primary brand color needs to be visible in dark mode.

Testing contrast for an error message on a custom field.

Auditing a large design system's base palette.

Making sure body text is readable on a non-white page.

The honest tradeoffs

Assuming contrast is enough.

Only checking black text.

Ignoring error state colors.

When It Fits, When It Doesn't

Questions you might have