FIRST CHTools

FIRST CH TOOLS / Design / 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.

A pair can clear the ratio and still fail people: colours told apart by hue alone — red against green — are indistinguishable for a predictable share of your audience (around 8% of men of northern European descent). The color blindness simulator shows the same two colours under protanopia, deuteranopia and tritanopia, and takes them straight from here.

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