この記事のポイント
- 16進数の文字色と背景色を入れるだけで判定できた
- 今回の組み合わせは14.04対1だった
- 通常文字でWCAG AA・AAAともPassになった
サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。
検証環境：2026年10月3日、Windows版ChromeでWebAIM Contrast Checkerを使用。前景色は#1F2937、背景色は#F9FAFBで試した。
薄いグレーの文字は整って見えるが、読みやすさは感覚だけでは比べにくい。WebAIM Contrast Checkerへ濃いグレー#1F2937と、ほぼ白の#F9FAFBを入力すると、結果は14.04:1になった。通常文字と大きな文字のWCAG AA・AAA、UI部品のAAがいずれもPassと表示された。
色を入力した直後に比率と合否が更新されるため、似た色を数値で比較しやすい。今回の組み合わせはかなり余裕があり、本文色として使いやすい。
2色を入れて結果を見る手順
- WebAIM Contrast Checkerを開く。
- Foregroundへ文字色の16進数を入力する。
- Backgroundへ背景色を入力する。
- Contrast RatioとNormal TextのAA・AAAを確認する。
- 足りない場合はLightnessを動かし、近い色を探す。
見るべき数字は文字サイズで変わる
WebAIMの説明では、通常文字のWCAG AAは4.5:1以上、大きな文字は3:1以上が基準である。AAAは通常文字7:1以上、大きな文字4.5:1以上だ。今回の14.04:1はどちらも上回った。
判定画面にはpermalinkも作られる。今回の組み合わせはこの判定URLで再確認できるため、デザイン案を共有するときにも使いやすい。
コメント