🌓 コントラスト不足の時、どれだけ変えれば合格?
WCAGコントラスト検査で不合格になると、実際にどこまで色を変えるべきか見当がつかないことが多いです。無理に濃くすればブランドカラーの雰囲気が消え、少しだけ変えても基準を通過できないままです。このツールは背景色をそのまま維持し、前景色(テキスト)の明度だけを最小限に調整して目標コントラストを通過する正確な値を計算します。
前景色と背景色の相対輝度を計算した後、現在のコントラストが既に目標(AA 4.5:1、AA大きいテキスト3:1、AAA 7:1)を満たしているか先に確認します。満たしていない場合は前景色の色相(Hue)と彩度(Saturation)はそのまま維持し、明度(Lightness)だけを二分探索で調整して、色味を最大限保ちながら最小の変化で基準を通過する点を見つけます。
結果には調整前・後の色を実際のテキストプレビューで一緒に表示するので、ブランドトーンがどれだけ維持されるかすぐに確認できます。前景色を純白・純黒に変えても基準に到達できない場合は、背景色の明度も一緒に調整する必要があるということです。
よくある質問
なぜ前景色だけ調整するのですか?背景色を変えてはいけないのですか?
変えても構いません。このツールは背景のブランドカラーを維持し、テキスト色だけを調整する状況を想定しています。背景色の調整が容易な場合は、2つの色を入れ替えて逆方向に計算してみてください。
調整不可と表示された場合はどうすればいいですか?
前景色を純白または純黒に変えても目標コントラストに到達できない場合です。この場合は背景色の明度も一緒に調整する必要があります。
AAとAAA基準、どちらに合わせるべきですか?
ほとんどのWebサービスはAA基準(4.5:1)を最低目標としています。公共機関や金融のようにアクセシビリティが特に重要なサービスならAAA基準(7:1)まで満たすことをお勧めします。