Color Contrast Auto Checker

複数の色の組み合わせを簡単にコントラスト比チェック

アクセシビリティ関連ツール一覧へ

色を登録

使い方

  1. 「色を選択」 ボタンを押すと各ブラウザ標準のカラーピッカーが表示されますので、そこから色を登録します。
    あるいは、ボタン横の入力欄に直接、16進数カラーコード(例: #FF0000)を入力することもできます。16進数カラーコード以外の入力は無効です。
  2. 色を 2つ以上 登録してください。最低 2つ、色が登録されていないとコントラストの比較ができないのでエラーになります。
  3. 初期状態で色の登録ボタンは 2つ 表示されますが、さらに色を追加したい場合は「新しい色を追加」ボタンを押すと、色の登録用ボタンが画面に追加されます。
  4. 必要な色の登録が完了したら「コントラスト比チェックを実行」ボタンを押すと、チェック結果が表示されます。なお、結果が煩雑にならないように、達成基準における「大きな文字」については考慮していません。

※ データ保存機能などはないので、ページがリロードされるとそれまでに登録していた色は全部消えます。ご注意ください。

参考: WCAG におけるコントラストに関する達成基準

達成基準 1.4.3 コントラスト(最低限) (WCAG 2.0, 2.1, 2.2 および JIS X 8341-3:2016 / レベル AA)

テキスト及び文字画像の視覚的提示には、少なくとも 4.5 : 1 のコントラスト比がある(附随的、ロゴタイプを除く)。

(大きな文字)サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 3:1 のコントラスト比がある。

達成基準 1.4.6 コントラスト(高度) (WCAG 2.0, 2.1, 2.2 および JIS X 8341-3:2016 / レベル AAA)

テキスト及び文字画像の視覚的提示には、少なくとも 7 : 1 のコントラスト比がある(附随的、ロゴタイプを除く)。

(大きな文字)サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 4.5:1 のコントラスト比がある。

達成基準 1.4.11 非テキストのコントラスト (WCAG 2.1, 2.2 / レベル AA)

ユーザインタフェース コンポーネント、およびグラフィカルオブジェクトにおいて、隣接した色との間で少なくとも 3 : 1 のコントラスト比がある。