この記事のポイント
- #777と白の組み合わせは4.47対1だった
- 通常文字のAA基準4.5対1にわずかに届かなかった
- 大きな文字とUI部品のAA判定は通過した
サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。
検証環境：2026年10月11日、Windows上のGoogle Chrome。WebAIM Contrast Checkerを無料・未ログインで利用し、前景色
#777777、背景色#FFFFFFを指定した。薄いグレーの文字は整って見えるが、「これくらいなら読める」という目視だけでは基準との境目が分からない。WebAIMへ2色を入れるとコントラスト比は4.47:1だった。
通常サイズの文字に求められるWCAG AAの4.5:1へ、ほんの少し届かずFailになった。一方、大きな文字のAAと、アイコンなどグラフィカルオブジェクト・UI部品のAAはPassと表示された。同じ2色でも用途で判定が変わる。
操作手順
- WebAIM Contrast Checkerを開く。
- Foreground Colorへ
777777を入力する。 - Background Colorへ
FFFFFFを入力する。 - Contrast RatioとNormal Text、Large Text、Graphical Objectsの判定を読む。
4.47:1は四捨五入して4.5とみなさない。WCAGは計算値を丸めて基準を満たす扱いにしないため、通常文字へ使うなら少し濃い色へ調整する必要がある。
色コードだけでなく用途まで一緒に測る
通常文字、大きな文字、UI部品では必要な比率が異なる。デザイン確認では「この2色は合格か」ではなく、「何の文字や部品に使う2色か」を決めてから該当行を見ると判断を誤りにくい。
コメント