# WCAG Contrast Checker MCP for AI Agents MCP

> WCAG Contrast Checker evaluates whether your website's color combinations meet established accessibility standards. This MCP checks contrast ratios against WCAG 2.1 and APCA models, validating specific text pairs or auditing entire brand palettes at once. It ensures that users with visual impairments can actually read what you write.

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

## Description

Building a great-looking website means nothing if people can't use it. This MCP handles the hard part: making sure your colors contrast enough for everyone to read. You feed it color codes, and it immediately tells you if they pass WCAG 2.1 or the newer APCA standards. Need to check just one background against a foreground? Use this connector for that calculation. Want to validate an entire set of brand colors before coding anything? Audit your full palette instantly. And if a pair fails, don't sweat it; the MCP suggests compliant alternatives that minimally adjust the lightness while hitting your required AA or AAA target level.

When you connect this through Vinkius, your AI client gains instant access to these checks without needing separate browser extensions or manual calculations. It turns color compliance from a guessing game into an automated step in your design workflow.

## Tools

### audit_palette
Validates whether an entire set of colors meets a specific accessibility standard.

### calculate_contrast
Determines the precise contrast ratio and if two specified colors are accessible.

### find_compliant_suggestion
Suggests a new background color that meets your target standard by adjusting the lightness of the current color.

## Prompt Examples

**Prompt:** 
```
What is the WCAG 2.1 AA compliance ratio between #333333 and #EEEEEE?
```

**Response:** 
```
**Accessibility Check Report**

*   **Foreground:** #333333 (Dark Gray)
*   **Background:** #EEEEEE (Light Gray)

| Standard | Ratio | Status |
| :--- | :---: | :---: |
| WCAG 2.1 AA Normal | **6.8:1** | ✅ Pass |
| WCAG 2.1 AAA Normal | 7:1 | ⚠️ Fail |

The ratio is strong, passing all standard requirements for normal text size.
```

**Prompt:** 
```
I need a background color that works with #FF0000 and hits AAA Normal.
```

**Response:** 
```
**Suggested Compliant Backgrounds**

We're looking for a contrast ratio of 7:1 or higher.

*   **Primary Suggestion:** `#FFFFFF` (Pure White)
    *   Ratio achieved: **21:1**
    *   Compliance: WCAG AAA Pass

*   **Secondary Option:** `#F0F8FF` (Alice Blue)
    *   Ratio achieved: **14.5:1**
    *   Compliance: WCAG AAA Pass
```

**Prompt:** 
```
Audit my palette: #A0A0A0, #333333, and #F0F8FF for general usability.
```

**Response:** 
```
**Palette Audit Results**

The collection of colors passes most standards but needs review on the text/background relationship.

*   `#333333` on `#FFFFFF`: Passes (21:1).
*   `#A0A0A0` on `#FFFFFF`: Fails AA Normal (Contrast is 3.2:1). **Recommendation:** Use a darker shade.
*   `#F0F8FF` on `[Unknown]`: Needs pairing. Consider using it as the background for text that uses `#333333` for maximum contrast.
```

## Capabilities

### Audit entire brand palettes
The MCP validates a collection of colors against accessibility standards to ensure consistency across all elements.

### Calculate specific color contrast ratios
It determines the exact ratio and whether two given colors pass or fail standard accessibility checks.

### Suggest compliant alternatives
The MCP suggests a new background color that meets your target level (AA or AAA) by making minimal adjustments to the original hue.

## Use Cases

### A new brand guide needs to be approved
The UX Designer feeds the agent a list of five primary and secondary colors. The agent uses `audit_palette` and immediately reports which color combinations fail compliance, saving hours of manual spreadsheet work.

### A specific headline text needs adjusting
The developer wants to ensure the main H1 text contrasts enough against a dark background. They use `calculate_contrast` and find that changing the foreground color slightly fixes the issue, passing AAA standards.

### A banner ad has bad colors
The marketer inputs the existing red/yellow scheme for a sale banner. The agent uses `find_compliant_suggestion` and suggests a compliant background color that maintains visibility while meeting WCAG AA requirements.

## Benefits

- Stops guesswork. Instead of guessing if your colors are readable, the MCP calculates the exact contrast ratio and tells you instantly if it passes AA or AAA standards.
- Test palettes in bulk. Use `audit_palette` to validate an entire collection of brand colors at once, guaranteeing that every element adheres to accessibility rules.
- Fix failing pairs easily. If a combination fails, use `find_compliant_suggestion` to get a suggested background color that meets your minimum target level with minimal visual change.
- Saves development time. Developers can rely on the precise data from `calculate_contrast`, cutting out manual checks and tedious cross-referencing against complex WCAG documentation.
- Builds for everyone. Compliance isn't optional; this MCP ensures that people using screen readers or with low vision can actually use your site.

## How It Works

The bottom line is you get instant, standards-compliant feedback on your color choices without writing any code or running multiple checks manually.

1. Start by identifying the colors you need to check, such as text and backgrounds.
2. Your AI client sends these color codes and the desired compliance level (e.g., WCAG AA) to this MCP.
3. The tool returns a detailed report showing the exact contrast ratio, whether it passes or fails, and suggests actionable fixes if necessary.

## Frequently Asked Questions

**How does WCAG Contrast Checker help me meet accessibility standards?**
It gives you immediate, precise data on color ratios. Instead of guessing if two colors are readable, it calculates the exact contrast ratio and tells you if they pass specific levels like AA or AAA, making compliance straightforward.

**Can I use this MCP to check my entire website's color palette?**
Yes. You can run an audit on a whole set of colors using the MCP. This helps you verify that every single background and foreground combination across your site meets compliance standards before development even starts.

**If my text fails the test, what should I do?**
The MCP has a tool that suggests specific alternative colors for backgrounds. It adjusts the lightness of the failing color just enough to get you back over the required AA or AAA threshold.

**Is this better than using browser extensions for contrast checking?**
This MCP is much more powerful because it’s programmatic. You aren't limited to what a single extension can check; your AI agent uses it to run comprehensive, multi-point audits and suggestions across entire design systems.

**Does WCAG Contrast Checker support the newest APCA standards?**
Yes. It supports both the established WCAG 2.1 rules and the newer APCA models (WCAG 3.0), giving you future-proof validation for your designs.