色を登録
使い方
- 「色を選択」
ボタンを押すと各ブラウザ標準のカラーピッカーが表示されますので、そこから色を登録します。
あるいは、ボタン横の入力欄に直接、16進数カラーコード(例:#FF0000
)を入力することもできます。16進数カラーコード以外の入力は無効です。 - 色を 2つ以上 登録してください。最低 2つ、色が登録されていないとコントラストの比較ができないのでエラーになります。
- 初期状態で色の登録ボタンは 2つ 表示されますが、さらに色を追加したい場合は「新しい色を追加」ボタンを押すと、色の登録用ボタンが画面に追加されます。
- 必要な色の登録が完了したら「コントラスト比チェックを実行」ボタンを押すと、チェック結果が表示されます。なお、結果が煩雑にならないように、達成基準における「大きな文字」については考慮していません。
※ データ保存機能などはないので、ページがリロードされるとそれまでに登録していた色は全部消えます。ご注意ください。
参考: 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 のコントラスト比がある。
コントラスト比チェック結果
コントラスト比
適合レベル AA
適合レベル AAA