FIRST CH TOOLS LOCAL PROCESSING — NOTHING LEAVES YOUR DEVICE 日本語

FIRST CH TOOLS / 03 CONTRAST CHECKER

WCAG Contrast Checker

Calculates the contrast ratio (WCAG 2.1) between text and background colors, with AA / AAA pass–fail results. The result is reflected in the URL so you can share it as-is (e.g. ?fg=333333&bg=ffffff).

Large text sample (24px bold)
This is normal body text. Use it to judge how readable this color pair is at body size (15px).
—
Contrast ratio
CriterionRequiredResult
AA — normal text4.5 : 1—
AA — large text (18pt / 14pt bold+)3 : 1—
AAA — normal text7 : 1—
AAA — large text4.5 : 1—
UI components & graphics (non-text)3 : 1—

How to Use

  1. Pick two colorsUse the color pickers or type HEX values (e.g. #333333) for text and background.
  2. Read the verdictThe contrast ratio and AA/AAA results update instantly, with a live preview of the pair.
  3. Share itThe result is written to the URL — copy it and send it to your team.

About This Tool

The contrast ratio is computed with the relative-luminance formula from WCAG 2.1, the international web accessibility standard. Body text on a typical website should meet "AA — normal text" (4.5:1 or higher). We run this check as a standard QA item before every site delivery.

From AI Agents

This tool's contrast-ratio and AA/AAA verdict logic is also available as the contrast_check tool in our MCP (Model Context Protocol) server @first-ch/tools-mcp, callable directly by AI agents with no browser needed. See Using These Tools from AI Agents for setup details.

Install

claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp

Example call

# example input passed to the agent
contrast_check(fg="333333", bg="ffffff")

Other Tools