写真の上に文字を置くときの配色｜読みやすさを保つWEBデザイン

写真の上に見出しやボタンを置くと、WEBサイトの第一印象を強くできます。しかし、写真には明るい場所と暗い場所が混在するため、文字色を白にするだけでは読めるとは限りません。この記事では、画像の選び方から文字を置く位置、背景を補う方法、コントラストの確認手順まで解説します。

写真の明暗と文字を置く位置から考える

まず写真の上で文字を配置したい領域を確認します。空や白い壁などの明るい部分には白文字が埋もれやすく、影の多い場所では暗い文字が見えにくくなります。写真全体の平均的な色ではなく、実際に文字が重なる範囲を調べることが大切です。

写真の被写体を隠さないように、文字を置ける余白がある写真を選びます。人物の顔や商品の重要な部分に見出しを重ねると、写真と情報の両方が伝わりにくくなります。PCとスマートフォンでは画像の切り抜かれる位置が変わるので、横長の画面だけで配置を決めないようにしましょう。

文字が置ける暗い領域が十分にある場合は、白文字を重ねる方法を試せます。ただし、写真の差し替えや表示サイズの変更で明暗が変わります。安定した読みやすさを求めるなら、文字の下に単色パネルを配置する方法も用意しておくと便利です。

文字パネルとボタンを含めた具体的な配色

例として、旅行サービスの写真を背景にした見出しを考えます。写真の左側に濃い青灰 ■#203449 の不透明なパネルを置き、見出しと説明文を白 ■#FFFFFF にします。両者のコントラスト比は約12.74:1です。パネルの内部に文字を収めれば、写真の空や海が明るくても文字の背景色は一定にできます。

申込みボタンには濃い青緑 ■#285A68、ボタン文字には白 ■#FFFFFF を使うと約7.63:1です。ボタンと青灰のパネルは両方とも暗めなので、余白や輪郭線、形状を使って操作部分を区別します。文字とボタンのコントラストが十分でも、ボタン自体が背景から見つけやすいとは限りません。

もう一つの方法は、写真の隣に明るい情報欄を配置する構成です。情報欄はほぼ白の ■#F5F7F8、見出しと本文は濃い青灰 ■#203449 とすると、約11.85:1になります。写真に色や明暗が多いときは、無理に文字を重ねず写真と文章を分けると、画像を隠さず説明も読ませやすくなります。

別の行動ボタンを使うなら、赤茶 ■#934C38 と白文字 ■#FFFFFF の組み合わせは約6.30:1です。青緑と赤茶を同じページで無制限に使うのではなく、どちらか一方を主要な行動色として選びます。

グラデーションや半透明の重なりを確認する

写真の上に暗いグラデーションを重ねる方法もあります。ただし、透明度が高い部分では写真の色が強く残ります。写真の最も明るい場所と、文字が実際に表示される各位置で、合成後の背景色とのコントラストを調べましょう。単色パネルで求めた比率を半透明の重なりにそのまま使ってはいけません。

WCAG 2.2のAA基準では、一般的な文字と背景のコントラスト比は4.5:1以上、規定の大きな文字は3:1以上です。写真の上の細い文字、小さな補足文、ボタン文字を別々に確認します。重要な文言を画像ファイルに直接書き込むより、HTMLテキストとして配置すると、端末幅に合わせて折り返しや表示位置を調整できます。

HueRollではHEXコード（色を16進数で表す記法）を入力し、色の濃淡や白・黒とのコントラストを確認できます。ただし、任意の2色同士や写真上の画素との比率は自動判定できません。最終的には実際の表示画面で確かめ、文字を置く領域の明暗が変わっても内容が伝わる構成を選びましょう。