Color Contrast Checker MCP. Never guess if your colors pass WCAG AA compliance again.
Gemini Works with every AI agent you already use
…and any MCP-compatible client
Just plug in your AI agents and start using Vinkius.
Color Contrast Checker. Validate WCAG accessibility compliance for any color pair. Use your AI client to test foreground/background combinations against WCAG AA and AAA standards.
Quickly check contrast for dark mode, light mode, pure black, or pure white backgrounds. Get instant pass/fail reports and calculated contrast ratios for inclusive web design.
What your AI agents can do
Check black text on bg
Checks the contrast ratio of pure black text against a specific background color.
Check color contrast
Calculates the WCAG contrast ratio between a specified foreground and background color pair.
Check danger text contrast
Checks the contrast ratio for standard danger/error red text on a background.
Calculates the exact WCAG contrast ratio for any two specific foreground and background hex codes.
Checks the contrast of a text color against a pure white or pure black background.
Runs contrast checks against predefined standard surfaces, like dark mode or light mode backgrounds.
Tests the contrast ratio for standard error or danger red text against a background.
Determines if pure white text stands out enough on a given background color.
Ask AI about this MCP
Supported MCP Clients
Gemini Waiting for input…
Color Contrast Checker: 8 Tools for Accessibility Auditing
Run targeted checks for specific color pairings, from standard mode validation to custom background contrast ratios.
019d8429check black text on bg
Checks the contrast ratio of pure black text against a specific background color.
019d8429check color contrast
Calculates the WCAG contrast ratio between a specified foreground and background color pair.
019d8429check danger text contrast
Checks the contrast ratio for standard danger/error red text on a background.
019d8429check dark mode surface
Checks contrast against a standard dark mode surface color.
019d8429check light mode surface
Checks contrast against a standard light mode surface color.
019d8429check text on pure black
Checks the contrast ratio of a text color against a pure black background.
019d8429check text on pure white
Checks the contrast ratio of a text color against a pure white background.
019d8429check white text on bg
Checks the contrast ratio of pure white text against a specific background color.
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
Make Your AI Do More
Start with Color Contrast Checker, then connect any of our 4,700+ other servers whenever your AI needs more. One click, no limits.
- Use this MCP plus 4,700+ 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
What you can do with this MCP connector
You gotta run this server through your AI client to make sure your website is actually accessible. It'll check color contrast against WCAG standards, so you don't end up with text nobody can read. You can audit any color pairing by feeding it two hex codes and getting the exact contrast ratio.
It checks pure black text against any background, and pure white text against any background. You can also test against standard surfaces, like dark mode or light mode backgrounds. If you're dealing with error text, it checks the contrast for standard danger red text against a background. It even handles text on pure white or pure black backgrounds.
You can check the contrast ratio for pure white text on any background color. You can also check pure black text against any background color. When you need to check a specific pairing, you use check_color_contrast to calculate the WCAG contrast ratio between a specified foreground and background color pair.
For pure black text, use check_black_text_on_bg to check the contrast ratio of pure black text against a specific background color. When you need to check pure white text, use check_white_text_on_bg to check the contrast ratio of pure white text against a specific background color. If you're designing for a dark theme, you run check_dark_mode_surface to check contrast against a standard dark mode surface color.
For a light theme, you use check_light_mode_surface to check contrast against a standard light mode surface color. If you're dealing with error messages, you use check_danger_text_contrast to check the contrast ratio for standard danger/error red text on a background. For text on pure black, you use check_text_on_pure_black to check the contrast ratio of a text color against a pure black background.
For text on pure white, you use check_text_on_pure_white to check the contrast ratio of a text color against a pure white background.
How Color Contrast Checker MCP Works
- 1 Subscribe to the server and provide your Apify API key.
- 2 Ask your AI agent to run a specific check, providing the foreground and background colors (e.g., 'Check contrast for #3B82F6 on white').
- 3 The server returns a detailed report, including the contrast ratio and WCAG AA/AAA compliance status.
The bottom line is you get an immediate, data-backed answer on whether your chosen colors pass accessibility standards.
Who Is Color Contrast Checker MCP For?
Anyone building a visual product needs this. UI/UX Designers need to make sure their color palettes are accessible before they even hit a mockup. Web Developers need to check ratios live in the editor. Accessibility Auditors need a reliable way to batch-verify design tokens across large projects. It's for anyone whose job depends on making things look good and work for everyone.
Validates entire design systems, ensuring every color pair (like body text on a card background) meets WCAG standards before handoff.
Checks contrast ratios directly in the editor, making sure the component colors they write don't accidentally fail accessibility requirements.
Runs batch checks across design tokens to guarantee color compliance across multiple screens and components.
What Changes When You Connect
- Audit any color pair. Instead of guessing, use
check_color_contrastto get the exact ratio for any foreground/background combination. This is critical for custom branding elements. - Validate standard themes. Use
check_dark_mode_surfaceandcheck_light_mode_surfaceto ensure your UI looks good and passes compliance whether the user is in dark or light mode. - Test common scenarios instantly. Need to know if white text looks right on that specific background?
check_white_text_on_bghandles it. It’s faster than opening a separate auditing tool. - Catch error state failures. When a form fails validation, the error text needs high contrast.
check_danger_text_contrastconfirms that your red error message is readable regardless of the background. - Check pure extremes. Use
check_text_on_pure_blackandcheck_text_on_pure_whiteto confirm your basic text elements meet the highest contrast standards, covering the fundamentals. - Get immediate pass/fail reports. The server doesn't just give a number; it tells you if the combination passes WCAG AA for normal text (4.5:1) or large text (3:1). That's actionable data.
Real-World Use Cases
Fixing a miscolored button
The design team picked a cool blue for a primary button, but it fails WCAG AA when used on the main page background. Instead of manually adjusting the color until it passes, the developer runs check_color_contrast with the button's blue and the background color. The agent returns the ratio and suggests a compliant darker shade, solving the issue immediately.
Verifying dark mode text readability
You're building a dark mode UI and need to know if your accent text (e.g., #A3B18A) reads correctly on the dark surface. You use check_dark_mode_surface to get the ratio. If the ratio is too low, you know the text needs to be brighter, saving hours of visual debugging.
Auditing a new marketing landing page
A new campaign uses a complex, off-white background and a specific shade of gray for body text. You run check_color_contrast to validate the combination. If the ratio falls below 4.5:1, you stop the build immediately and adjust the text color, preventing an accessibility failure before launch.
Checking error messages in a form
A form submission fails, and the error message uses a custom-colored background highlight. You use check_danger_text_contrast to verify that the error red text remains highly readable against that specific highlight color. This ensures the user sees the error, no matter the surrounding design.
The Tradeoffs
Relying on 'it looks fine'
A developer builds a UI component using a 'nice' light gray text on a 'nice' pale blue background. It looks fine on a monitor, but it fails WCAG AA compliance because the contrast ratio is only 3.2:1.
→
Don't trust your eyes. Use check_color_contrast to input the specific hex codes and get the objective ratio. This tool provides the necessary pass/fail metric, eliminating visual guesswork.
Ignoring mode-specific failures
A site works perfectly in light mode, but when the user switches to dark mode, the body text becomes muddy and unreadable because the contrast ratio drops below 4.5:1.
→
Run check_dark_mode_surface and check_light_mode_surface to test your main body text against both standard surfaces. This catches the failure before deployment.
Only checking text on white
A designer only verifies the main body copy against a white background, forgetting that secondary elements like warning banners or disabled fields use colored backgrounds.
→
Use check_danger_text_contrast for warnings and check_white_text_on_bg for light-on-colored elements. Always test the text against the specific background it will actually live on.
When It Fits, When It Doesn't
Use this server if your job involves defining or inspecting color palettes, or if you are building a UI that must adhere to WCAG accessibility standards. You need to know the numerical ratio between text and background colors, not just if they 'look okay.'
Don't use this if you are troubleshooting structural issues (e.g., keyboard navigation fails) or if you need to validate color usage across an entire document's content (e.g., checking every image caption). For those, you need a full automated WCAG scanning tool that reads the DOM. This server is a targeted, precise tool for color pair validation only.
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
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 server provides 8 capabilities that interface natively with Claude, ChatGPT, Cursor, and any MCP client. No middleware. No custom integration required.
Available Capabilities
Accessibility checks used to be tedious, involving manual color pickers and spreadsheet comparisons.
Before this, checking contrast meant opening a separate online tool, grabbing hex codes, pasting them in, and hoping the resulting ratio was high enough. You'd repeat that process for every single color pair—the primary button, the secondary text, the warning banner, the footer background. It was a slow, click-heavy process that often led to human error and missed details.
Now, you just ask your agent. You give the hex codes, and the server runs `check_color_contrast`. It returns the ratio and tells you immediately if it passes WCAG AA for normal text. The manual, copy-paste workflow is gone. You get the data you need, instantly.
Color Contrast Checker MCP Server: Run specialized checks for specific use cases.
You don't always need a general check. Sometimes you only care about a specific state, like error messages. Instead of running a general check, you can use `check_danger_text_contrast` to test only the error text. Or maybe you only need to validate white text on a custom background using `check_white_text_on_bg`.
The server handles these niche, high-stakes checks separately. It makes your workflow tighter and more precise. You don't have to wade through general results; you get the exact compliance report for the specific element that failed.
Common Questions About Color Contrast Checker MCP
How do I use `check_color_contrast` for my custom colors? +
You provide the hex codes for both the foreground and background colors. The tool calculates the WCAG ratio and tells you if it meets AA or AAA standards.
Does `check_danger_text_contrast` check all error colors? +
No. check_danger_text_contrast is specifically designed to check the contrast for standard 'danger' or error red text, ensuring it meets compliance on a given background.
What's the difference between `check_text_on_pure_white` and `check_color_contrast`? +
The difference is scope. check_text_on_pure_white checks a text color against a fixed pure white background. check_color_contrast checks a text color against any custom background color you supply.
Can I validate my design system colors with `check_dark_mode_surface`? +
Yes. check_dark_mode_surface tests contrast against a standard, predefined dark mode background, helping you ensure your colors work when the user selects a dark theme.
When I use `check_text_on_pure_black`, how do I specify the text color? +
You specify the text color as the first parameter. The second parameter sets the background to pure black (#000000). This lets you test colors that look different on a pure black background.
Is `check_color_contrast` only for hex codes, or can I use RGB values? +
The tool accepts both hex codes and RGB values. Just ensure you provide the format the API expects. This flexibility lets you test colors defined in different parts of your design system.
What happens if I run `check_dark_mode_surface` with a color that is too light? +
The tool returns the specific contrast ratio. If the ratio is low, the result indicates a failure against WCAG standards. You'll then know exactly which colors need adjustment.
If I check multiple colors, how does the server handle the input data? +
You can send multiple color pairs in a single request. The server processes each pair independently and returns a list of individual pass/fail reports. This makes batch checking easy.
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).
Use it with your favorite AI tools
Connect this server to Cursor, Claude, VS Code, and more.
More in this category
Gitee
Collaborative code hosting and development platform — manage repositories, issues, and pull requests via AI.
DummyImage
Generate dynamic placeholder images for web development and design directly from your AI agent.
Deterministic Array Operations
Equip your AI with high-performance array manipulation. Deterministically chunk large datasets, deep-deduplicate objects, and intersect arrays 100% local.
You might also like
MTA
Access NYC transit data via MTA — track subway and bus in real-time, check arrivals, monitor LIRR and Metro-North, and check service alerts from any AI agent.
Storm Glass Marine & Weather
Universal marine and weather intelligence — get global wave, tide, and bio data via AI.
Aptabase (Mobile Analytics)
Send telemetry and custom events to Aptabase directly from your AI agent to track app usage and performance.