Color Utilities

Contrast Ratio

Calculate WCAG contrast ratios between two colors to ensure accessibility compliance. Use via MCP in Cursor or Windsurf, or call GET /v1/color/contrast-ratio with foreground and background color parameters. Returns precise ratios like 4.52:1, plus WCAG AA/AAA compliance status for text and large text. Essential for accessible UI design workflows.

API Endpoint

GET /v1/color/contrast-ratio

Code Examples

curl "https://tinyfn.io/v1/color/contrast-ratio" \
  -H "X-API-Key: YOUR_API_KEY"
const response = await fetch('https://tinyfn.io/v1/color/contrast-ratio', {
  headers: { 'X-API-Key': 'YOUR_API_KEY' }
});
const data = await response.json();
console.log(data);
import requests

response = requests.get('https://tinyfn.io/v1/color/contrast-ratio',
    headers={'X-API-Key': 'YOUR_API_KEY'})
data = response.json()
print(data)

Use via MCP

Add to your AI agent

Connect your AI agent (Claude, Cursor, Windsurf, etc.) to TinyFn's color tools:

{
  "mcpServers": {
    "tinyfn-color": {
      "url": "https://tinyfn.io/mcp/color",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Learn more about MCP setup →

Related Tools

Hex To Hsl
Convert hex color to HSL.
Hsl To Hex
Convert HSL to hex color.
Hex To Hsv
Convert hex color to HSV.
Hsv To Hex
Convert HSV to hex color.
Hex To Cmyk
Convert hex color to CMYK.
Cmyk To Hex
Convert CMYK to hex color.
Lighten Color
Lighten a color by a percentage.
Darken Color
Darken a color by a percentage.

FAQ

What WCAG contrast ratio do I need for accessibility compliance?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

How do I check contrast ratio between hex colors using MCP?

Call the contrast-ratio tool with foreground and background hex values like #000000 and #FFFFFF. It returns the calculated ratio and WCAG compliance levels for both text sizes.

What color formats does the contrast ratio calculator accept?

Accepts hex (#FF0000), RGB (rgb(255,0,0)), HSL, and named colors like 'red' or 'blue'. Both foreground and background colors use the same format options.

Why is my contrast ratio calculation different from other tools?

This tool follows the official WCAG 2.1 relative luminance formula precisely. Differences usually come from gamma correction variations or rounding in other calculators.

Can I batch check multiple color combinations for contrast compliance?

The endpoint processes one color pair per request. For batch checking in AI workflows, call the tool multiple times or use the REST API in a loop.

Try Contrast Ratio Now

Get your free API key and start using Contrast Ratio in seconds.

Get Free API Key