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
| Criterion | Required | Result |
|---|---|---|
| AA — normal text | 4.5 : 1 | — |
| AA — large text (18pt / 14pt bold+) | 3 : 1 | — |
| AAA — normal text | 7 : 1 | — |
| AAA — large text | 4.5 : 1 | — |
| UI components & graphics (non-text) | 3 : 1 | — |
How to Use
- Pick two colorsUse the color pickers or type HEX values (e.g. #333333) for text and background.
- Read the verdictThe contrast ratio and AA/AAA results update instantly, with a live preview of the pair.
- 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.
Other Tools
- 01Batch Image → WebP ConverterWebP Converter
- 02White Background RemoverWhite BG Remover
- 04Character CounterCharacter Counter
- 05llms.txt Generatorllms.txt Generator
- 06JSON-LD GeneratorJSON-LD Generator
- 07Markdown → PDFMD → PDF
- 08OGP Checker & Meta Tag GeneratorOGP Checker
- 09Favicon GeneratorFavicon Generator