# Color Contrast Checker MCP for AI Agents AI Agent Connect

> Color Contrast Checker MCP lets you verify WCAG accessibility compliance instantly. It checks if your text is readable against various backgrounds, ensuring your designs meet AA and AAA standards for inclusive web and app development.

## Overview
- **Category:** developer-tools
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_ToTQpdJuObTgdPgJyLWHlH7B6StfiSmankHl08eC/ai-agent-connect
- **Tags:** wcag, accessibility, color-contrast, design-system, ui-design

## Description

You're designing a new UI and need to know if your primary action button actually works for everyone. Instead of jumping back and forth between your design tool and a separate contrast calculator, you can just ask your AI client to handle the math. This Connector connects your tools to the WCAG standards, giving your agent the ability to audit color pairs on the fly. It handles the common stuff like white or black backgrounds, but it also knows how to check specific UI states like dark mode surfaces or danger text. It's one of the practical ways you can use the Vinkius catalog to make sure your design system doesn't leave anyone out. You get a clear pass or fail based on the ratio, along with specific suggestions on how to adjust your hex codes to hit the target. It takes the guesswork out of accessibility so you can keep moving on the actual design work.

## Tools

### check_black_text_on_bg
Checks the contrast of pure black text against a specific background color. Use this to verify basic readability.

### check_color_contrast
Calculates the ratio between a foreground and background color pair. Use this to audit visual accessibility.

### check_danger_text_contrast
Checks contrast of standard red danger text on a background. Use this to verify alert visibility.

### check_dark_mode_surface
Checks contrast against a standard dark mode surface. Use this to ensure low-light designs are readable.

### check_light_mode_surface
Checks contrast against a standard light mode surface. Use this to ensure light themes are readable.

### check_text_on_pure_black
Checks the contrast of a text color against a pure black background. Use this for high-contrast UI checks.

### check_text_on_pure_white
Checks the contrast of a text color against a pure white background. Use this for standard content audits.

### check_white_text_on_bg
Checks the contrast of pure white text against a specific background. Use this to verify button labels.

## Prompt Examples

**Prompt:** 
```
Is #4A90E2 readable on a white background?
```

**Response:** 
```
Contrast ratio: 4.5:1. ✅ Passes WCAG AA for normal text. It's right on the edge, so you might want to go slightly darker if you want extra safety.
```

**Prompt:** 
```
Check my red error text on a dark gray background.
```

**Response:** 
```
The contrast ratio is 3.2:1. ❌ Fails WCAG AA. To meet the 4.5:1 requirement, try using a lighter red like #FF6B6B.
```

**Prompt:** 
```
Does my dark mode surface work with white text?
```

**Response:** 
```
Contrast ratio: 15.2:1. ✅ Passes WCAG AA and AAA. Your white text is very readable against the dark surface.
```

## Capabilities

### Check specific color pairs
Get the exact contrast ratio for any foreground and background hex code.

### Validate WCAG standards
See instantly if your colors meet AA or AAA accessibility requirements.

### Audit dark mode surfaces
Verify that your text remains readable against specific dark mode UI elements.

### Verify alert visibility
Ensure your danger or error text colors stand out clearly against their backgrounds.

### Get pass or fail reports
Receive immediate feedback on whether a color combination is accessible.

## Use Cases

### Checking a brand palette
A designer wants to know if a new brand blue is accessible on white. They ask the agent to check the ratio and get a fail with a suggested darker hex code.

### Building a dark mode toggle
A developer wants to ensure their new dark mode surface works with white text. They ask the agent to use `check_dark_mode_surface` to verify the contrast.

### Batch-checking design tokens
An auditor needs to verify 20 different buttons. They ask the agent to check all pairs against WCAG AA standards in one go.

### Landing page audits
A marketer wants to know if their Sign Up text is readable. They ask the agent to check the contrast of the specific button color.

## Benefits

- Stop guessing if your colors work. Use `check_color_contrast` to get exact ratios for any hex pair.
- Save time on common checks. Use `check_text_on_pure_white` or `check_text_on_pure_black` for instant results.
- Ensure dark mode is actually usable. Use `check_dark_mode_surface` to validate your low-light UI.
- Keep your errors visible. Use `check_danger_text_contrast` to make sure red alerts stay readable.
- Meet legal standards faster. Get pass or fail reports for WCAG AA and AAA compliance automatically.

## How It Works

The bottom line is you get instant accessibility validation without leaving your workspace.

1. Subscribe to this Connector in the Vinkius catalog.
2. Add your Apify API key to the configuration.
3. Ask your AI client to check any hex code pair or UI scenario.

## Frequently Asked Questions

**What does Color Contrast Checker do?**
It checks if your text colors are readable against your background colors based on WCAG standards. It gives you a ratio and tells you if it passes.

**Can I use Color Contrast Checker for dark mode?**
Yes, you can use it to check your dark mode surfaces specifically. It helps ensure your app stays accessible in low light.

**Does this help with WCAG compliance?**
Yes, it checks against the AA and AAA standards. This makes it much easier to meet legal accessibility requirements for web content.

**How do I check a specific color pair?**
Just tell your AI client the two hex codes. It will calculate the ratio and tell you if it's readable enough for different text sizes.

**Can it check button colors?**
It can check any color pair. You can provide the button color and the background color to see if the text on top is accessible.

**Is this for web developers or designers?**
It's for both. Designers use it for brand colors and developers use it to check UI components like buttons and alerts.

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