Colors
Suggested passing text color
← Images & Color
Contrast Checker
Check WCAG color contrast for text accessibility directly in your browser. No upload required.
Result
21.00:1
Contrast ratio (1:1 to 21:1)
| Text size | AA | AAA |
|---|---|---|
| Normal (under 18pt) | ||
| Large (18pt+, or 14pt bold) |
Normal text sample. The quick brown fox jumps over the lazy dog.
Large text sample
Use this tool from AI agents
This tool's engine is available to AI agents over MCP as color_contrast. Add the Clean.tools server, then your agent can call it directly.
Claude Code
claude mcp add --transport http clean-tools https://mcp.clean.tools/mcpclaude mcp add --transport http clean-tools https://mcp.clean.tools/mcpClaude Desktop (mcpServers)
{"mcpServers":{"clean-tools":{"command":"npx","args":["-y","@clean-tools/mcp"]}}}{"mcpServers":{"clean-tools":{"command":"npx","args":["-y","@clean-tools/mcp"]}}}Cursor
https://mcp.clean.tools/mcphttps://mcp.clean.tools/mcpOr call it over plain HTTP from any script. Same engine, JSON in and JSON out, no key:
curl
curl -s https://api.clean.tools/v1/color_contrast \
-H 'content-type: application/json' \
-d '{"foreground":"#777777","background":"#ffffff"}'curl -s https://api.clean.tools/v1/color_contrast \
-H 'content-type: application/json' \
-d '{"foreground":"#777777","background":"#ffffff"}'JavaScript
const res = await fetch("https://api.clean.tools/v1/color_contrast", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({"foreground":"#777777","background":"#ffffff"})
});
const data = await res.json();const res = await fetch("https://api.clean.tools/v1/color_contrast", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({"foreground":"#777777","background":"#ffffff"})
});
const data = await res.json();How it works
This contrast checker applies the WCAG 2.x formula entirely on your device. It converts each color to its relative luminance, then computes the contrast ratio as (lighter + 0.05) / (darker + 0.05), giving a value between 1:1 and 21:1. It compares that ratio against the WCAG thresholds: 4.5 for normal text at AA, 7 for AAA, and 3 and 4.5 for large text (18pt and up, or 14pt bold) at AA and AAA. The live sample previews your exact colors so you can judge readability alongside the numbers.
Nothing is uploaded and no color values are sent to a server. All calculation happens in JavaScript in your browser, so it works offline on mobile and desktop. When a pairing fails AA for normal text, the tool suggests a passing text color by nudging its lightness toward or away from the background until it clears 4.5:1. If you would rather check contrast from scripts or AI agents, the same engine is available through the Clean.tools API, or you can install the @clean-tools/mcp package from npm.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
For normal body text, AA requires at least 4.5:1 and AAA requires 7:1. For large text, which WCAG defines as 18pt (about 24px) and larger, or 14pt bold and larger, AA drops to 3:1 and AAA to 4.5:1. This tool reports pass or fail for all four cases at once.
Why is the ratio the same when I swap text and background?
The WCAG formula is symmetric: it always divides by the lighter and darker luminance regardless of which color is text and which is background, so swapping them leaves the ratio unchanged. The swap button is a convenience for previewing the design both ways, not for changing the score.
How is the suggested passing color chosen?
The tool keeps your background fixed and shifts the text color step by step, darkening it against a light background or lightening it against a dark one, until the pair reaches 4.5:1 (AA for normal text). It returns the first value that passes, so the suggestion stays close to your original color rather than jumping to pure black or white.
Does this cover the WCAG rules for large or bold text?
Yes. The results table lists large text separately using the 3:1 (AA) and 4.5:1 (AAA) thresholds. Remember that WCAG counts 14pt bold as large text, so a heading that fails at the normal thresholds may still pass under the large-text rules.
Can I use this from the command line or an AI agent?
Yes. Send a POST request to https://api.clean.tools/v1/color_contrast with your foreground and background colors and you will get the same ratio and pass or fail results as JSON. The tool is also an MCP server you can add to Claude, Claude Code, or Cursor, so an agent can check contrast on its own. Installing the @clean-tools/mcp package from npm runs the same engine as a local stdio server.
More tools from Clean.tools
Use Clean.tools from your AI agent
This tool is also color_contrast on the Clean.tools MCP server — the same engine, callable by your AI agent directly. No key, no signup: requests are processed in memory and request contents are never stored.
Claude Code
claude mcp add --scope user --transport http clean-tools https://mcp.clean.tools/mcpclaude mcp add --scope user --transport http clean-tools https://mcp.clean.tools/mcpAny MCP client (streamable HTTP, authless)
https://mcp.clean.tools/mcphttps://mcp.clean.tools/mcpEvery tool, the REST API, and setup for Cursor, Claude Desktop, VS Code & more →