# Color Contrast Checker MCP

> Color Contrast Checker instantly verifies if your text is readable on any background. Instead of guessing accessibility compliance, this MCP uses the official WCAG 2.1 formula to calculate the exact contrast ratio between two colors. It tells you immediately if it meets AA or AAA standards for both normal and large text.

## Overview
- **Category:** developer-tools
- **Price:** Free
- **Tags:** accessibility, wcag-compliance, ui-design, color-theory, web-standards

## Description

Your AI client needs to know if a color combination will pass an audit—and simple visual checks aren't enough. This MCP calculates the precise contrast ratio using the official WCAG 2.1 relative luminance formula, so you get math that works every time. You can feed it HEX, RGB, or HSL values and instantly check against standards for both normal body text and large headings. It doesn't just spit out a number; it gives you a human verdict like 'Excellent (AAA)' or 'Fail.' Connecting this MCP via Vinkius means your agent can run these checks right alongside other development tasks, making sure every design choice is accessible before a single line of code ships.

## Tools

### check_color_contrast
Pass foreground and background colors to get the exact contrast ratio, along with AA/AAA pass/fail status for normal and large text.

## Prompt Examples

**Prompt:** 
```
I'm using white text (#ffffff) on this blue button (#2563eb). Does it pass accessibility standards?
```

**Response:** 
```
Contrast: 4.68:1 | AA Normal: ✅ Pass | AA Large: ✅ Pass | AAA Normal: ❌ Fail | Verdict: Good (AA)
```

**Prompt:** 
```
Our legal team says our website must meet AAA. Check if #1a1a2e background with #e2e8f0 text qualifies.
```

**Response:** 
```
Contrast: 13.2:1 | AAA Normal: ✅ Pass | Verdict: Excellent (AAA) — exceeds all requirements.
```

**Prompt:** 
```
The designer wants 'gray' text on a 'lightgray' background for subtle labels. Will users be able to read it?
```

**Response:** 
```
Contrast: 1.67:1 | Verdict: ❌ Fail — unreadable. Minimum for any text is 3:1. Suggest using #525252 instead.
```

## Capabilities

### Calculate precise contrast ratios
It determines the exact ratio between two specified colors down to two decimal places.

### Check WCAG 2.1 compliance
The MCP verifies if the color combination passes both AA and AAA standards set by the Web Content Accessibility Guidelines (WCAG).

### Audit normal text readability
You check for minimum contrast required when using standard body copy.

### Audit large text readability
It verifies the necessary contrast level specifically for larger font sizes, which often has lower requirements than normal text.

### Accept multiple color formats
The tool accepts input using HEX, RGB, HSL, or standard CSS color names.

## Use Cases

### Audit a dark mode theme
A developer is building a dark mode UI. They ask their agent to check the white text (#ffffff) on the dark blue background (#1a1a2e). The MCP runs `check_color_contrast` and confirms it hits 13.2:1, passing AAA standards with flying colors.

### Review subtle error messages
A UX designer needs a pale gray for disabled fields. They run the agent to check light gray text (#e2e8f0) on a white background (#ffffff). The MCP returns 1.67:1, immediately flagging it as 'Fail' and forcing them to choose a darker color.

### Validate marketing assets
A content team uploads an image mockup for a campaign banner. They ask their agent to check the text color on the brand background. The MCP quickly calculates the ratio, ensuring the high-contrast requirements are met before printing or deploying.

### Verify legal document standards
A compliance officer needs proof that all headings meet AAA contrast minimums. They use their agent to run `check_color_contrast` repeatedly across different sections of the template, providing an auditable report for legal review.

## Benefits

- Eliminate guesswork on color choices. You get the precise ratio and compliance status for every combination you check, so your designs pass audits right out of the gate.
- Check standards in one go. With `check_color_contrast`, you audit both normal text (4.5:1 / 3:1) and large text (7:1 / 4.5:1) requirements simultaneously. No more checking two different rulesets.
- Work with any color format. Whether your source file uses HEX, RGB, or names, this MCP handles it. It's flexible enough for design systems that switch between color models.
- Clearer results mean less friction. Instead of a table of numbers you have to interpret, the tool gives a simple 'Excellent (AAA)' verdict, making reporting straightforward.
- Build compliance into your workflow. By connecting this MCP through Vinkius, your agent can automatically validate design tokens as they are defined in code or documentation.

## How It Works

The bottom line is you get an objective, auditable score that tells you exactly if your colors are accessible to everyone.

1. You send the MCP a foreground color and a background color, specifying their formats (e.g., #ffffff on #2563eb).
2. The engine runs those colors through the official WCAG 2.1 formula to calculate the ratio for normal and large text.
3. Your agent receives a simple report with the exact contrast number, pass/fail status for AA/AAA, and a clear verdict.

## Frequently Asked Questions

**Does Color Contrast Checker MCP handle all color formats?**
Yes. The tool accepts HEX, RGB, HSL, and standard CSS named colors, so you don't have to worry about converting inputs before running the check.

**Can I use check_color_contrast for logos?**
While it will calculate the ratio, this MCP is designed for text legibility. If your logo requires a specific color contrast that fails WCAG standards, this tool will flag it.

**How does check_color_contrast know which standard to use?**
The tool uses the official WCAG 2.1 relative luminance formula, checking both AA and AAA compliance levels for you automatically.

**What is the difference between normal text and large text in check_color_contrast?**
Normal text checks require a higher minimum contrast ratio (e.g., 4.5:1) than large text does (e.g., 3:1). The MCP runs both checks so you know which standard applies to your specific element.

**If I run check_color_contrast with an invalid color code format, what error response should I expect?**
The tool will return a clear validation error message. It expects standard formats like HEX or RGB; any input outside those structures will generate a specific failure notice, preventing calculation attempts.

**Can check_color_contrast calculate contrast when one color is transparent or part of a gradient?**
No, the tool requires two solid, defined colors for comparison. It uses the WCAG luminance formula between specific inputs. For gradients, you must sample multiple points to get an accurate range.

**Are there any rate limits or performance concerns when using check_color_contrast frequently?**
The MCP is built for high throughput and doesn't impose internal user-side rate limits. However, making excessive calls in a very short window might trigger standard platform throttling mechanisms.

**Does check_color_contrast only adhere to WCAG 2.1 standards, or can it check older versions?**
It exclusively uses the official WCAG 2.1 standard and its specific mathematical formula for all calculations. This guarantees adherence to current W3C guidelines for accurate compliance.

**My AI says this color combination passes WCAG. Should I trust it?**
No. LLMs cannot reliably calculate relative luminance — they approximate. This engine uses the exact W3C formula: L = 0.2126*R + 0.7152*G + 0.0722*B with sRGB gamma correction. Trust the math, not the prediction.

**What's the difference between AA and AAA levels?**
AA requires 4.5:1 contrast for normal text — the legal minimum in most countries. AAA requires 7:1 — the gold standard for maximum readability. Large text (18pt+) has relaxed thresholds: 3:1 for AA, 4.5:1 for AAA.

**Can I mix color formats? Like HEX for foreground and a CSS name for background?**
Absolutely. Pass '#333333' as foreground and 'white' as background, or 'rgb(0,0,0)' with 'hsl(0,0%,95%)' — the engine normalizes everything internally.