カラーコントラストチェッカー
2色のコントラスト比とWCAG 2.1のAA・AAA適合を判定。文字サイズと太さから、当てはまる基準を示します。
判定
-
太枠の2行が、指定した文字サイズに当てはまる基準です。ほかの2行は参考として表示しています。
使い方
- 前景（文字）と背景の色をカラーピッカーかHEXで指定すると、コントラスト比とWCAG 2.1の判定を表示します。HEXは「#」の有無、3桁・6桁のどちらでも入力できます。
- 「前景と背景を入れ替え」で2色を入れ替えます。コントラスト比は入れ替えても変わりません。
- 文字サイズと太字を指定すると、「通常のテキスト」「大きなテキスト」のどちらの基準が当てはまるかを示し、プレビューの文字もその大きさで表示します。
判定の基準
- 通常のテキスト：AA は 4.5:1 以上、AAA は 7:1 以上（WCAG 2.1 達成基準 1.4.3・1.4.6）。
- 大きなテキスト：AA は 3:1 以上、AAA は 4.5:1 以上。大きなテキストは 24px（18pt）以上、または太字で 18.66px（14pt）以上の文字です。
- アイコンや入力欄の枠など文字以外の要素の基準（3:1、達成基準 1.4.11）は、「大きなテキスト AA」の行を目安にできます。
計算のしかたと注意点
- WCAG 2.1 の相対輝度の式（sRGB）で2色の明るさを求め、（明るい色＋0.05）÷（暗い色＋0.05）で比を計算します。比は1:1〜21:1です。
- 表示する比は小数第3位以下を切り捨てた値で、判定は切り捨てる前の値で行います。たとえば 4.496:1 は「4.49:1」と表示し、AA（4.5:1）は不適合です。
- 透明度（アルファ値）、グラデーションや画像の背景、文字の縁取り・影は扱えません。書体によって見え方は変わるため、判定は目安としてお使いください。
- 処理はブラウザ内で行い、入力した内容をサーバーへ送信しません。