Skip to main content
Glama

Accessible Color Contrast MCP

by ryelle

Accessible Color Contrast MCP

A simple MCP (Model Context Protocol) server for checking accessible color pairings. This uses the WCAG (Web Content Accessibility Guidelines) contrast algorithm to calculate real contrast ratios, which can inform your AI when working with colors.

More about WCAG Contrast requirements

Setup

Add this to your AI platform:

{ "mcpServers": { "accessibility": { "command": "npx", "args": ["-y", "a11y-color-contrast-mcp"] } } }

Note, if you use nvm, you might need to use the path to the correct npx version (22), for example:

"command": "/path-user-home/.nvm/versions/node/v22.9.0/bin/npx",

Example Usage

  • What is the contrast between #481bef and #c3eecb?
  • If I have a background color #22d3ee, should I use light or dark text on it?
  • What color text should I use for a background #6a4ba7 if I need to meet WCAG AAA level support?
  • Can you suggest 3 color pairs that are accessible? The colors should not be black or white, and should be reminiscent of fall.

Available Tools

Get Color Contrast

Get the WCAG constrast value between two colors.

Parameters

  • colorA (required): First color (hex, rgb, hsl, or named color).
  • colorB (required): Second color (hex, rgb, hsl, or named color).

Are Colors Accessible

Test two colors for WCAG accessible contrast.

Parameters

  • colorA: First color (hex, rgb, hsl, or named color).
  • colorB: Second color (hex, rgb, hsl, or named color).
  • level: WCAG level to test against, AA or AAA. Default "AA".
  • size: Font size of text, larger font has a lower threshold. Can be small or large. Default "small".

Use Light or Dark

Detect whether to pair a light or dark color against a given color for best contrast.

Parameters

  • color: Color (hex, rgb, hsl, or named color).
  • level: WCAG level to test against, AA or AAA. Default "AA".
  • size: Font size of text, larger font has a lower threshold. Can be small or large. Default "small".

Development

This package contains a stdio and an http server, though the stdio is the recommended method for interacting with it.

Requirements

  • Node v22

Install the dependencies with npm install. The MCP server itself lives in src/server.ts, with the stdio server in index.ts and the http server in http.ts.

Scripts

  • npm run build: Builds the src files into build.
  • npm run stdio: Builds the src files, then starts the stdio server.
  • npm run serve: Builds the src files, then starts the http server.
  • npm run test: Run the Jest tests.

http server

This is a work in progress while I figure out if it's worth setting up as a remote server. For now, it's developer-only. Once running (see above), you can access this on port 3000.

Here's an example interaction you can test with a tool like Insomnia.

POST http://localhost:3000/mcp

{ "jsonrpc": "2.0", "method": "tools/call", "params": { "name": "get-color-contrast", "arguments": { "colorA": "#ff0000", "colorB": "#ffffff" } }, "id": 1 }
HTTP/1.1 200 OK Content-Type: text/event-stream event: message data: {"result":{"content":[{"type":"text","text":"4.00"}]},"jsonrpc":"2.0","id":1}
-
security - not tested
F
license - not found
-
quality - not tested

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Enables checking WCAG color contrast ratios and accessibility compliance between color pairs. Helps determine optimal text colors for backgrounds and validates color combinations meet accessibility standards.

  1. Setup
    1. Example Usage
  2. Available Tools
    1. Get Color Contrast
    2. Are Colors Accessible
    3. Use Light or Dark
  3. Development
    1. Requirements
    2. Scripts
    3. http server

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ryelle/a11y-color-contrast-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server