# WCAG Contrast Checker MCP for AI Agents AI Agent Connect

> WCAG Contrast Checker lets you verify if your UI colors meet accessibility standards. It calculates ratios for WCAG 2.1 and the newer APCA (WCAG 3.0) models. Use it to check specific color pairs, audit entire palettes, or get suggested colors that pass AA and AAA requirements for your web projects.

## Overview
- **Category:** web-development
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_Lfv8VqyLJIKyGy3fae9w4KOMmwDTCPhqWj1LLrE1/ai-agent-connect
- **Tags:** wcag, contrast, accessibility, apca, color-palette, ui-testing

## Description

Stop guessing if your button text is actually readable. When you're building a site, checking every single color combination against accessibility guidelines usually involves jumping between different tools or doing manual math that nobody wants to do. This Connector lets your agent handle the heavy lifting. You can just describe the colors you're using, and it'll tell you exactly where you stand. It even suggests fixes when a color fails a check. It's a massive time saver for anyone who needs to ship accessible products without the headache of manual auditing. You can find this along with thousands of other tools in the Vinkius catalog to build out your full development stack. Instead of hunting for a separate calculator, you just ask your agent to verify the contrast for your new hero section or primary buttons. It returns the exact ratio, the pass or fail status, and even a new hex code if you need to adjust the lightness to meet the target. It makes accessibility a part of your natural workflow rather than a final chore.

## Tools

### find_compliant_suggestion
Suggests a new background color that meets a specific accessibility target by minimally adjusting the current color's lightness. It helps you fix issues without ruining your design.

### audit_palette
Validates a collection of colors to ensure they all satisfy a specific accessibility standard. Use this to check your entire brand kit at once.

### calculate_contrast
Determines the exact contrast ratio and accessibility pass/fail status for two specific colors. This gives you a clear yes or no on readability.

## Prompt Examples

**Prompt:** 
```
Check the contrast between #767676 and #FFFFFF.
```

**Response:** 
```
The contrast ratio for #767676 on #FFFFFF is **4.54:1**. 

**Status:**
- **WCAG 2.1 AA Normal:** Pass ✅
- **WCAG 2.1 AA Large:** Pass ✅
- **WCAG 2.1 AAA Normal:** Fail ❌
- **APCA Score:** 1.42
```

**Prompt:** 
```
Suggest a background color for #FF0000 to meet the AAA_NORMAL standard.
```

**Response:** 
```
To meet the **AAA_NORMAL** standard for your red text (#FF0000), I suggest using the following background color:

**Suggested Background:** `#FFFFFF` 

This achieves a contrast ratio of **21:1**, which comfortably passes all accessibility requirements.
```

**Prompt:** 
```
Does my brand palette of #333, #666, and #999 pass WCAG 2.1 AA?
```

**Response:** 
```
Here is the accessibility audit for your brand palette:

| Color | Contrast Ratio | WCAG 2.1 AA | Status |
| :--- | :--- | :--- | :--- |
| #333333 | 12.6:1 | Pass | ✅ |
| #666666 | 4.54:1 | Pass | ✅ |
| #999999 | 2.85:1 | Fail | ❌ |

**Note:** The #999999 color fails the AA standard for normal text.
```

## Capabilities

### Check specific color pairs
Get the exact contrast ratio and pass or fail status for two specific colors.

### Audit entire color palettes
Validate a collection of colors to ensure they all satisfy a specific accessibility standard.

### Get compliant color suggestions
Receive a new background color that meets a target by minimally adjusting the current color's lightness.

### Calculate APCA scores
Determine scores for the newer WCAG 3.0 models.

### Verify AA and AAA standards
Confirm your UI meets specific contrast levels for different types of text.

## Use Cases

### Checking a new brand orange
A designer wants to know if a new brand orange works on a white background. They ask the agent to check the contrast and get a pass/fail status immediately.

### Fixing a failed button
A developer finds a button that fails accessibility during a test. They ask the agent for a compliant suggestion to fix the background color.

### Bulk auditing a landing page
A QA engineer needs to verify that every primary color on a landing page is compliant. They use the tool to audit the entire palette in one step.

### Dark mode palette validation
A designer wants to check if a dark mode palette meets high contrast needs. They use the tool to verify both WCAG 2.1 and the newer APCA models.

## Benefits

- Stop guessing if your text is readable by using calculate_contrast for every pair.
- Quickly verify your entire brand kit with audit_palette to ensure consistency.
- Get immediate fixes for non-compliant UI elements with find_compliant_suggestion.
- Stay ahead of new standards by checking APCA scores for WCAG 3.0.
- Ship accessible products faster by automating the manual math of WCAG 2.1 levels.

## How It Works

The bottom line is you get instant, accurate accessibility data without leaving your editor.

1. Connect the Connector to your preferred AI client.
2. Provide your hex codes or describe your color scheme to your agent.
3. Receive contrast ratios, pass or fail statuses, and suggested fixes.

## Frequently Asked Questions

**How does WCAG Contrast Checker help my web project?**
It lets you instantly verify that your UI colors are readable. Your agent can check hex codes against accessibility standards so you don't have to do the math manually.

**Can WCAG Contrast Checker check for the new APCA standards?**
Yes, it calculates results for both the older WCAG 2.1 models and the newer APCA (WCAG 3.0) models to keep your designs future-proof.

**How do I use WCAG Contrast Checker to fix a bad color?**
Just ask your agent to suggest a compliant color for a specific pair. It will find a new background or text color that meets your target with minimal changes.

**Does WCAG Contrast Checker work for dark mode?**
Absolutely. It checks any color pair you provide, making it perfect for validating dark mode themes and high-contrast requirements.

**Can I check an entire brand palette at once?**
Yes, you can use the tool to audit a whole collection of colors. This ensures your entire brand kit meets accessibility standards consistently.

**What are AA and AAA levels in WCAG Contrast Checker?**
These are different levels of accessibility requirements. The tool checks your colors against these specific thresholds to ensure you meet your project's goals.

**What standards does this tool support?**
The tool supports WCAG 2.1 (Contrast Ratio) and WCAG 3.0 (APCA - Advanced Perceptual Contrast Algorithm).

**How can I find a color that passes AA standards?**
You can use the `find_compliant_suggestion` tool. Provide your current color and specify 'AA_NORMAL' as the target level.

**Can I check multiple colors at once?**
Yes, use the `audit_palette` tool by providing a JSON array of foreground colors and a single background color.