a11y.skipToMainContent
1

カラーコントラストチェッカー(WCAG)

フォアグラウンドと背景色を選択し、直ちにWCAG 2.1のコントラスト比をAAとAAA、通常と大きなテキストのパス/失敗バッジで見ます。 ライブプレビューが含まれています.

Contrast ratio
21.0:1
AA Normal
≥ 4.5:1
AA Large
≥ 3:1
AAA Normal
≥ 7:1
AAA Large
≥ 4.5:1

Normal body text — The quick brown fox jumps over the lazy dog.

Large heading — Sample preview

Large text = 18pt+ or 14pt+ bold. WCAG 2.1 thresholds.

Was this tool helpful?
Send output to:
Advertisement

How to use Color Contrast Checker

  1. フォアグラウンドと背景色を選択します.
  2. コントラスト比とパス/失敗バッジを読みます.
  3. スワップまたはFGを反転して、代替をテストします.

カラーコントラストチェッカーとは?

WCAG 2.1は、正規のテキスト(AA)の4.5:1、大きなテキスト(AA)の3:1、通常(AAA)の7:1、大(AAA)の4.5:1を定義します。 大きいテキストは18pt+か14pt+太字として定義されます。 このツールは、WCAG 仕様の相対列式を使用して比率を計算します。

Advertisement

FAQ

大きいテキストは何ですか?
18pt + (24px) 通常の重量、または 14pt + (18.66px) 太字。 ほとんどのh1/h2要素は修飾します.
非テキストUI要素とは?
WCAG 2.1 では、UI コンポーネント(button ボーダー、フォームフィールドアウトライン)と意味のあるアイコンの 3:1 のコントラストが必要です。 AAの大きなバッジがこれに近づく.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

Advertisement