半透明背景の文字は読みやすい？コントラストを考えるポイント

写真の上に文字を置く告知バナーでは、半透明の帯を敷くと画像を見せながら情報を載せられます。しかし、帯の色と不透明度を同じにしても、背後が明るい場所と暗い場所では文字の読みやすさが変わります。この記事ではイベント案内を例に、実際に重なった背景色を求め、コントラストを調べる方法を紹介します。

半透明の色ではなく、合成後の背景色を確認する

半透明の帯に白文字を載せるとき、比べるのは帯の元の色と白ではなく、「帯と写真が重なって完成した背景色」と白です。CSS（WEBページの見た目を指定するルール）で背景色をrgb(20 43 69 / 50%)と設定すると、RGB（赤・緑・青の成分）で表した濃紺■#142B45を不透明度50%で表示します。下地が透けて混ざるため、重なる位置によって色は変わります。

WCAG 2.2（WEBコンテンツを利用しやすくするための国際的な指針）の達成基準1.4.3、レベルAAでは、通常サイズの文字と背景のコントラスト比は4.5:1以上、大きな文字では3:1以上が原則です。白文字■#FFFFFFを使う場合も、実際に見えている合成後の背景との比率を判断します。

要素全体へopacity: 0.5を指定すると、背景だけでなく中の文字も半透明になります。文字を不透明に保ちたいときは、帯のbackground-color自体に透明度を指定します。

明るい下地と暗い下地で同じ帯を比較する

イベントの告知バナーで、明るい壁を薄いベージュ■#F5EFE5、木陰を濃い青■#163A56の単色で近似します。そこへ濃紺■#142B45の不透明度50%の帯を重ね、白文字■#FFFFFFを置くと仮定します。実際の写真全体を表すものではなく、下地の違いを調べるための計算例です。

明るいベージュの上では合成後の帯が青灰色■#858D95になり、白文字■#FFFFFFとのコントラスト比は約3.36:1です。通常文字の4.5:1に届きません。一方、暗い青の上では帯が暗い青■#15334Eになり、同じ白文字■#FFFFFFとの比率は約13.00:1です。同じ半透明色と不透明度でも、下地によって結果は大きく変わります。

帯の不透明度を75%にすると、ベージュ上の完成色は濃い青灰色■#4C5C6Dとなり、白文字■#FFFFFFとの比率は約6.87:1です。暗い青上では■#152F49となり、白文字■#FFFFFFとの比率は約13.68:1です。透明度の調整で写真が見えにくくなるなら、文字の周囲だけを不透明な濃紺■#142B45のパネルにしてもよいでしょう。この場合、白文字■#FFFFFFとの比率は約14.37:1です。

写真の差し替えやスマホ表示でも確認する

写真には明るい部分と暗い部分が混在するため、特定の一点だけで全体を判定しないようにします。文字の下に来る領域を複数箇所で確認し、写真を差し替えた場合や、スマートフォンで画像の切り抜き位置が変わる場合も確かめましょう。比率の計算には、指定した半透明色ではなく、画面に現れる合成後の色を使います。

必要な比率を維持できない場所があるなら、文字を置く位置を調整するか、不透明な背景パネルに切り替えます。大きな見出しでは3:1を適用できる場合でも、小さな日時や会場名には通常文字の4.5:1が必要です。数字の上で基準を満たしても、細い書体や画面の明るさによる見え方も実機で確認します。

HueRollでは選んだ色と白・黒とのコントラスト比を確認できます。ただし、半透明色と写真の自動合成、任意の2色の比較、AA・AAAの自動判定には対応していません。元の色を探す出発点として利用し、合成後の背景色や実際の画面での確認は別途行いましょう。