a11y.skipToMainContent
1

コントラストチェッカー

フォアグラウンドと背景色のコントラスト比を確認します。 WCAG 2.1 AA と AAA をパス/フェイルインジケーターで確認します.

Contrast Checker

Large Text (18pt+)

Normal body text (16px)

21:1
Contrast Ratio
AA Normal
AA Large
AAA Normal
AAA Large
More options
Was this tool helpful?
Send output to:
Advertisement

How to use Contrast Checker

  1. フォアグラウンド(テキスト)の色を入力または選択します.
  2. 背景色を入力してください.
  3. 対照の比率およびWCAGのパス/失敗の結果を見て下さい.
  4. ターゲットのコンプライアンスレベルを満たすまで色を調整します.

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

WCAG 2.1のガイドラインに従って、2色間のコントラスト比を計算します。 通常のテキスト、大きなテキスト、UI コンポーネントの背景色に対してテキストが読みやすくなるかどうかを判断します。

WCAG 2.1 は、通常のテキスト(AA)、大きなテキスト(AA)の3:1、通常のテキスト(AAA)の7:1、および大きなテキスト(AAA)の4.5:1の最小コントラスト比を必要とします。 このツールは、すべての4つの基準のパス/失敗を即座に表示します。

Advertisement

FAQ

良いコントラスト比は何ですか?
WCAG 2.1 AAは、通常のテキストと大きなテキストの3:1のために4.5:1を必要とします。 AAAは、通常のテキストの7:1と大きなテキストの4.5:1を必要とします.
大きいテキストとしてカウントする?
大文字は18pt(24px)以上、14pt(18.66px)以上、大文字の場合に定義されます.

Related tools

Author

NK
Prof. Noah Klein"The Privacy Guardian"

Cybersecurity Researcher & Privacy Advocate

Professor Klein holds a PhD in Information Security and has testified before EU parliamentary committees on data privacy legislation. He builds encryption tools for journalists, audits web applications for security flaws, and believes that privacy is not a feature but a fundamental right. His research has been cited in Wired, Nature, and The Guardian, and he advises nonprofits on responsible data stewardship.

Advertisement