MCP For Claude Marketplace
Color Contrast Checker

Color Contrast Checker MCP Connector for Claude

A+

Instantly verify if your text is readable on any background. WCAG 2.1 AA/AAA compliance in one call — the AI guesses ratios, this engine calculates them.

1 tools Official Updated Oct 1, 2026 Official Vinkius Partner
More Details Connect to Claude

Your agent just picked #6c757d text on a #e9ecef background. Looks fine, right? Wrong — it fails WCAG AA with a 3.9:1 ratio. Your users with low vision can't read it, and your client's accessibility audit just failed.

This MCP uses the official WCAG 2.1 relative luminance formula to calculate the exact contrast ratio between any two colors. No approximation. No hallucination. Just the math that the W3C defined.

The Superpowers

  • Full WCAG 2.1 Matrix: AA and AAA compliance checked for both normal text (4.5:1 / 7:1) and large text (3:1 / 4.5:1) simultaneously.
  • Any Color Format: Pass HEX, RGB, HSL, or CSS named colors — mix and match freely.
  • Human Verdict: Returns 'Excellent (AAA)', 'Good (AA)', 'Large Text Only', or 'Fail' — no ratio tables to memorize.
  • Exact Ratio: The precise contrast ratio to 2 decimal places, not a guess.
accessibilitywcag-complianceui-designcolor-theoryweb-standards

1 tools expose this connector's capabilities to your AI agent.

check_color_contrast

Pass foreground and background colors in any format (HEX, RGB, HSL, CSS name). Returns the exact contrast ratio, WCAG AA/AAA pass/fail for both normal and large text, and a human-readable verdict. AI cannot reliably calculate contrast ratios — this engine uses the official WCAG 2.1 relative luminance formula. Checks WCAG 2.1 color contrast ratio between foreground and background. Returns AA/AAA compliance for normal and large text

See how to talk to your AI agent using Color Contrast Checker.

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

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

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

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

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

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

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.

Related Connectors

AI Feature Accessibility Scorer

AI Feature Accessibility Scorer MCP

4 tools Official

Assess accessibility health for AI features using WCAG standards.

A+ View details →
Accessibility Checker

Accessibility Checker MCP

4 tools Official

Verify building compliance against universal accessibility standards (USA/EU) for corridors, ramps, and restrooms.

A+ View details →
NEW
Accessible Ticketing Decision Plan

Accessible Ticketing Decision Plan MCP

4 tools Official

Evaluates ticket availability and purchase feasibility by prioritizing mandatory accessibility needs and budget constraints.

A+ View details →
Ad Copy Compliance Checker

Ad Copy Compliance Checker MCP

2 tools Official

Audit ad copy against platform character limits and content policies.

A+ View details →