Accessible Color Contrast
- typescript
2
GitHub Stars
typescript
Language
6 months ago
First Indexed
2 months ago
Catalog Refreshed
Documentation & install
Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.
You can use this MCP server to check accessible color pairings using WCAG contrast rules. It serves practical color-contrast tools you can call from your AI platform to compute contrast values, verify accessibility, and guide color choices for readability.
How to use
Set up an MCP client to connect to the server endpoints and call the available tools to compute contrast, verify accessibility, or decide between light and dark text for given backgrounds. Use the HTTP endpoint for remote calls when the server is hosted remotely, or use the local stdio interaction for direct, in-process usage. You can query contrast values between two colors, test whether two colors meet WCAG thresholds at the desired level, and determine if you should pair a color with light or dark text for optimal readability.
How to install
Prerequisites: ensure you have Node.js version 18 or newer installed on your system.
Install and run the MCP server client by following these steps.
# Install dependencies and build if required
npm install
# Start the stdio server via the MCP entry point
npx -y a11y-color-contrast-mcp
# If you need to run the HTTP server, build and start as directed by the project setup
# The HTTP endpoint will be available on port 3000 when active
Additional notes
The server exposes multiple tools for color contrast work. You can retrieve the WCAG contrast value for two colors, check whether two colors meet WCAG AA or AAA thresholds at a given font size, and decide whether to pair a color with a light or dark text color for readability.
Available tools
Get Color Contrast
Returns the WCAG contrast value between two colors. Provide colorA and colorB in hex, rgb, hsl, or named color formats to receive the contrast ratio.
Are Colors Accessible
Tests two colors for WCAG accessible contrast against a specified level (AA or AAA) and text size (small or large).
Use Light or Dark
Determines whether to pair a given color with a lighter or darker text color to achieve the best WCAG-compliant contrast for the specified level and text size.
