Design Tools
Color Contrast Checker
🔒 ブラウザで動作
Check WCAG 2.1 color contrast ratio for AA and AAA compliance. Instant, in-browser, no upload.
このツールの使い方
- Enter a foreground (text) colour and a background colour as hex values, or pick them with the swatches.
- The tool computes the relative luminance of each colour and divides them to get the contrast ratio.
- Read the ratio and the pass/fail badges for WCAG AA and AAA at normal and large text sizes.
Sample text — Aa Bb Cc
The quick brown fox jumps over the lazy dog
21.00:1
AA — Normal text (≥4.5:1)Pass
AA — Large text (≥3:1)Pass
AAA — Normal text (≥7:1)Pass
AAA — Large text (≥4.5:1)Pass
WCAG 2.1 — Large text is 18pt+ or 14pt+ bold. All calculations run in your browser.
よくある質問
- What contrast ratio do I need to pass WCAG?
- WCAG 2.1 AA needs at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold). AAA is stricter: 7:1 for normal text and 4.5:1 for large text.
- How is the ratio calculated?
- It compares the relative luminance of the two colours as (L_lighter + 0.05) ÷ (L_darker + 0.05), giving a value from 1:1 (identical) up to 21:1 (black on white).
- What counts as “large” text?
- About 18pt and up for regular weight, or 14pt and up when bold. Large text is allowed a lower ratio because bigger glyphs stay legible at less contrast.
- Where does the calculation run?
- Entirely in your browser. The two colours you enter feed the luminance maths locally and are never sent anywhere.