# Color Accessibility Engine MCP for AI Agents AI Agent Connect

> Color Accessibility Engine provides precise color science for designers and developers. It handles WCAG 2.1 contrast checks, generates perceptually uniform color palettes using LCH color space, and measures visual differences between colors using the CIEDE2000 Delta-E formula to ensure perfect readability and visual harmony.

## Overview
- **Category:** design
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_69twE5mr5OOuWaSLhME69S8laGT4gfJyOHshUGv3/ai-agent-connect
- **Tags:** wcag, lch, color, accessibility, design-tools

## Description

Designing for the web often feels like a guessing game when it comes to how colors actually look to the human eye. You pick a brand color, try to find a matching text color, and then spend half your afternoon squinting at a screen or running manual contrast checkers to make sure you aren't violating accessibility standards. This MCP changes that by bringing professional-grade color science directly into your chat interface. Instead of jumping between browser extensions and design software, you can simply ask your agent to verify if a specific hex code works for text or to build a color palette that actually feels balanced. Because it uses the LCH color space, the palettes it suggests won't suffer from that weird desaturation or shifting lightness that happens with standard RGB math. You can even check how much two colors actually differ to the naked eye using industry-standard formulas. It's like having a color scientist sitting right next to you in your IDE or design tool, helping you make decisions that are both beautiful and compliant without the manual math.

## Tools

### analyze_color_accessibility
Checks if a base color meets WCAG 2.1 AA or AAA standards against black and white. It tells you exactly if your text is readable.

### compare_colors_perceptually
Calculates the visual difference between two colors using the Delta-E formula. It measures how much the human eye actually notices a change.

### generate_perceptual_palettes
Creates color harmonies like triadic or analogous sets using LCH math. It keeps lightness and saturation consistent across the whole palette.

## Prompt Examples

**Prompt:** 
```
Is #0055FF okay to use for text on a white background?
```

**Response:** 
```
No, that color won't work for standard text. 

| Metric | Result |
| :--- | :--- |
| **Contrast Ratio** | 3.2:1 |
| **WCAG AA (Normal Text)** | ❌ Fail |
| **WCAG AA (Large Text)** | ✅ Pass |
| **WCAG AAA** | ❌ Fail |

To pass AA for normal text, you'll need a darker blue with a ratio of at least 4.5:1.
```

**Prompt:** 
```
Give me a triadic color palette based on #FF5733.
```

**Response:** 
```
Here is a perceptually balanced triadic palette for your brand color:

*   **Primary:** `#FF5733` (Orange)
*   **Secondary:** `#33FF57` (Green)
*   **Tertiary:** `#3357FF` (Blue)

These colors were generated using LCH math to ensure they maintain a consistent perceived lightness.
```

**Prompt:** 
```
How much will a user notice if I change the button from #1A1A1A to #000000?
```

**Response:** 
```
The visual difference is quite small. 

**Perceptual Difference (Delta-E): 2.4**

In color science, a Delta-E below 1.0 is imperceptible, and a value around 2.0 to 3.0 is typically the threshold where a human might notice a change in controlled conditions. Most users won't see this as a significant shift.
```

## Capabilities

### Verify WCAG compliance
Check if your text colors meet AA or AAA accessibility standards against black and white benchmarks.

### Build balanced color palettes
Create complementary, triadic, or analogous color schemes that maintain consistent perceived lightness.

### Measure visual color differences
Calculate the exact perceptual distance between two colors using the CIEDE2000 Delta-E formula.

### Prevent color desaturation
Generate harmonies using LCH color space to keep colors looking vibrant and consistent.

## Use Cases

### Fixing low-contrast text
A developer realizes their brand blue is unreadable on a light background and asks their agent to find a compliant alternative.

### Creating brand palettes
A designer needs a set of analogous colors that all feel like they have the same 'weight' and brightness.

### Validating color changes
A product owner wants to know if changing a button from navy to royal blue is actually noticeable to users.

### Accessibility auditing
An engineer needs to quickly scan a list of hex codes to ensure they pass AAA standards for a government project.

## Benefits

- Stop manual checking by using analyze_color_accessibility to instantly verify text readability against WCAG standards.
- Build better color systems with generate_perceptual_palettes, which uses LCH math to keep colors looking natural.
- Eliminate guesswork in color selection by using compare_colors_perceptually to find the true visual difference between shades.
- Ensure your designs are inclusive by getting immediate feedback on contrast ratios for every color you pick.
- Avoid desaturated, muddy palettes by relying on perceptually uniform color math instead of standard RGB.

## How It Works

The bottom line is you get mathematically accurate color science results directly through your AI chat.

1. Connect your preferred AI client to the MCP via Vinkius
2. Provide hex codes or color descriptions to your agent
3. Receive precise accessibility scores, color harmonies, or perceptual difference data

## Frequently Asked Questions

**How can I check WCAG compliance with Color Accessibility Engine?**
You can simply ask your agent to check a specific hex code. It will compare your color against black and white benchmarks and tell you if it passes AA or AAA standards.

**Can I use Color Accessibility Engine to make color palettes?**
Yes. You can ask for complementary, triadic, or analogous palettes. It uses LCH color space to make sure the colors look balanced and not desaturated.

**Does Color Accessibility Engine work with my existing design tools?**
It works through your AI client. Once you connect it via Vinkius, you can use it inside Claude, Cursor, or VS Code to get color data without leaving your workflow.

**What is the difference between RGB and the LCH math used here?**
RGB is based on how screens work, while LCH is based on how humans actually see. This MCP uses LCH to ensure colors in a palette feel like they have the same brightness and intensity.

**How accurate are the color difference measurements in Color Accessibility Engine?**
The measurements are highly accurate because they use the CIEDE2000 Delta-E formula, which is the industry standard for calculating how much two colors differ to the human eye.

**How does this engine ensure color palettes look good?**
The engine uses the LCH (Lightness, Chroma, Hue) color space instead of HSL. This ensures that when you shift hues, the perceived lightness and saturation remain constant, avoiding muddy colors.

**Can I check if my brand color is accessible?**
Yes. By using `calculate_accessibility`, you can check if your base HEX color meets WCAG 2.1 AA or AAA standards for both normal and large text against pure black and white.

**What is Delta-E?**
Delta-E is a metric used to quantify the difference between two colors. This engine uses the CIEDE2000 formula to provide a value that matches how humans actually perceive color differences.