使い方
- カラーピッカー、または HEX コードの入力で、背景色と文字色を設定します。
- 4.50:1 のような数値で表示されるコントラスト比を読み取り、プレビューカードを確認します。
- 通常テキスト AA、大きいテキスト AA、通常テキスト AAA の PASS または FAIL のバッジを確認します。
このチェッカーは、Web Content Accessibility Guidelines(WCAG)の定義に従ってコントラスト比を計算します。各色を sRGB の式で相対輝度に変換し、コントラスト比は、明るいほうの輝度に0.05を足した値を、暗いほうの輝度に0.05を足した値で割ったものです。結果は小数点以下2桁で表示され、同じ色なら1:1、白地に黒なら最大の21:1です。初期の色は白と黒です。
結果は3つ表示されます。AA レベルの通常テキストには4.5以上の比率が必要です。AA レベルの大きいテキストには3以上が必要です。AAA レベルの通常テキストには7以上が必要です。それぞれ PASS または FAIL で示されます。コントラスト比自体も色分けされます。WCAG では、大きいテキストとは、おおよそ18ポイントの標準の太さ、または14ポイントの太字を指すため、テキストがそのサイズのときだけ、大きいテキストの結果を参考にしてください。
プレビューカードは、見出しとサンプルの文を2つの色で表示するので、数値だけでなく色そのものも見て判断できます。合格したからといって、それだけで読みやすさが保証されるわけではありません。フォントの太さ、サイズ、周囲の要素も影響するためです。
色は6桁の HEX コードで入力する必要があります。計算はブラウザ上で行われます。
よくある質問
どのくらいの比率が必要ですか?
WCAG AA では、通常テキストに4.5:1、大きいテキストに3:1が必要です。AAA では、通常テキストに7:1が必要です。ツールがそれぞれの結果を表示します。
大きいテキストとは何ですか?
WCAG では、約18ポイント以上、または14ポイント以上の太字のテキストを指します。
どの色をどこに入れればいいですか?
ツールは一方の色を背景、もう一方を文字として扱いますが、コントラスト比はどちらでも同じです。
短い HEX コードが使えないのはなぜですか?
#333 ではなく #333333 のように、6桁の完全な形式で入力してください。
テキスト以外の要素もチェックしますか?
テキストの基準のみを表示します。比率が表示されるので、インターフェース部品に対する3:1の指針とご自身で比較できます。