完全無料

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

2色間のコントラスト比をチェックし、WCAG AA・AAAのアクセシビリティ基準への適合を確認できます。無料・即時・ブラウザ内で完結。

サンプルテキスト(標準サイズ)

サンプル小テキスト — 14px

コントラスト比:21.00:1
WCAG AA通常テキスト合格
WCAG AA大きいテキスト合格
WCAG AAA通常テキスト合格
WCAG AAA大きいテキスト合格

このツールについて

WCAG 2.1 アクセシビリティ ガイドラインに従って、前景色と背景色の色のコントラスト比を確認します。色を 16 進数コード、RGB 値、または HSL 値として入力すると、通常のテキスト サイズと大きなテキスト サイズの両方で、コントラスト比と WCAG AA および AAA 準拠の合否結果が即座に表示されます。

使い方

  1. カラーピッカーまたは 16 進入力を使用して、前景色 (テキスト) の色を入力または選択します。
  2. 背景色を入力または選択します。
  3. コントラスト比と WCAG 2.1 AA/AAA の合否結果を即座に確認できます。
  4. 希望の準拠レベルに達するまで色を調整します。

よくある質問

WCAG 準拠にはどのようなコントラスト比が必要ですか?
WCAG AA では、通常のテキストの場合は 4.5:1、大きなテキスト (18 ポイント以上または 14 ポイント以上の太字) の場合は 3:1 が必要です。 WCAG AAA では、通常のテキストの場合は 7:1、大きなテキストの場合は 4.5:1 が必要です。最大可能な比率は 21:1 (白地に黒) です。
なぜ色のコントラストが重要なのでしょうか?
十分なコントラストにより、視力の低いユーザーや色覚異常のあるユーザー、または明るい日光の下で画面を見ているユーザーでもテキストを読むことができます。これは、多くの Web サイトに対する ADA および EU のアクセシビリティ規制に基づく法的要件でもあります。
WCAG では何が「ラージ テキスト」とみなされますか?
大きなテキストは、通常の太さの場合は 18pt (24px) 以上、太字のテキストの場合は 14pt (18.66px) 以上として定義されます。大きなテキストは本質的に読みやすいため、コントラストの要件は低くなります。
このツールはテキスト以外の要素のコントラストをチェックしますか?
WCAG 2.1 では、UI コンポーネントとグラフィック オブジェクト (ボタン、アイコン、フォーム フィールド) に 3:1 のコントラスト比が必要です。このツールを使用すると、コンポーネントと背景の色を入力するだけでそれらも確認できます。