写真と文字色の組み合わせとは?写真に重ねる文字を読みやすくする方法

写真の上にキャッチコピーをのせたら、一部の文字だけ背景に溶け込んで読めなくなってしまった。

写真に文字を重ねるデザインでは、よくある悩みです。

この記事では、写真と文字色の組み合わせとは何か、なぜ一色の文字では読めなくなるのか、オーバーレイや影を使って読みやすくする方法とその目安を、初心者向けに解説します。

写真と文字色の組み合わせの基本

まずはこの考え方が何を指しているのか、そしてなぜ単色の背景とは別の工夫が必要なのかを押さえましょう。

写真と文字色の組み合わせとは何か

写真と文字色の組み合わせとは、写真の上に文字を重ねるときに、その文字が読みやすく目立つように色や見せ方を選ぶ考え方のことです。

ここで鍵になるのが「コントラスト」です。

コントラストとは、隣り合う色同士の明るさの差のことで、差が大きいほど文字の輪郭がはっきりして読みやすくなります。

写真の上の文字が読めなくなるのは、文字の色と、そのすぐ下にある写真の色との明るさの差が足りないときです。

明るさの差を数値で確かめる方法はコントラスト比とは?で解説しています。

なぜ一色の文字では読めなくなるのか

単色の背景なら、背景に合わせて文字色を1つ決めれば済みます(背景色と文字色の考え方です)。

ところが写真は、場所によって明るさがまったく違います。

たとえば、明るい青空と暗い建物が一緒に写った写真に白い文字を置くと、建物の上の文字は読めても、青空の上の文字は背景に溶け込んで見えなくなります。

週末限定マルシェ

NG:白い文字は青空の上で読めない

週末限定マルシェ

NG:黒っぽい文字は建物の上で読めない

左が明るい青空、右が暗い建物の写真を、色の面で表した見本

左の見本では白い文字が青空の上で、右の見本では黒っぽい文字が建物の上で読めなくなっています。

白い文字と明るい青空のコントラスト比は約1.35:1、黒っぽい文字と暗い建物は約1.18:1で、どちらも読みやすさの目安(本文で4.5:1)に遠く届きません。

このように、文字色を変えるだけでは解決しない場面があるため、写真の側を整える工夫が必要になります。

写真の上の文字を読みやすくする4つの方法

ここからは、写真の上の文字を読みやすくする方法を、手軽なものから順に4つ紹介します。

方法1:写真の落ち着いた部分に文字を置く

一番手軽なのは、空や壁のように、柄が少なく明るさがそろった部分を選んで文字を置く方法です。

文字の下が明るい部分なら濃い文字色、暗い部分なら白っぽい文字色を選べば、コントラストを取りやすくなります。

最初から、文字を置くための余白がある写真を選んでおくのも有効です。

方法2:オーバーレイ(半透明のフィルム)を重ねる

2つめは、写真の上に半透明の黒い面を1枚重ねてから、白い文字をのせる方法です。

この半透明の面を「オーバーレイ」と呼びます。

写真の上に、透けて見える黒いフィルムを1枚かぶせるイメージです。

写真全体が少し暗くなるので、明るい部分も暗い部分も、白い文字との明るさの差が広がります。

オーバーレイには、写真全体に同じ濃さで重ねる方法と、文字のある側だけを暗くするグラデーションの方法があります。

週末限定マルシェ

OK:写真全体に黒60%のオーバーレイ

週末限定マルシェ

OK:下だけ暗くするグラデーション

どちらも、青空の上でも白い文字が読めるようになった

左の見本は写真全体を暗くしたもので、確実に読める一方、写真の明るい雰囲気も弱まります。

右の見本は、文字を置く下側だけを黒から透明へのグラデーションで暗くしたもので、上側の写真はそのまま見せられます。

写真の雰囲気を残したいときは、グラデーションの方法が向いています。

オーバーレイの濃さは、文字の後ろにある「一番明るい部分」に合わせて決めます。

白に近い部分の上に白い文字を置く場合、黒のオーバーレイの濃さと、白い文字とのコントラスト比はおおよそ次のとおりです。

黒のオーバーレイの濃さ	白い文字とのコントラスト比(白い背景の上)	読みやすさ
20%	約1.6:1	読めない
30%	約2.1:1	読めない
45%	約3.4:1	大きな見出しなら読める(目安3:1以上)
60%	約5.7:1	本文サイズの文字も読める(目安4.5:1以上)

写真全体が暗めなら、もっと薄いオーバーレイでも読めます。

反対に、文字の後ろに空や白い壁のような明るい部分があるなら、大きな見出しで45%以上、小さな文字なら60%前後を目安にしましょう。

CSSでは、写真の背景の上にもう1枚、半透明のグラデーションを重ねて指定します(画像のパスはサイトに合わせて変えてください)。

.hero {
  /* 上:黒60%のオーバーレイ  下:写真 */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("photo.jpg");
  background-size: cover;
  color: #ffffff;
}

方法3:文字の後ろだけに帯を敷く

3つめは、写真全体ではなく、文字の後ろだけに半透明の帯(四角い面)を敷く方法です。

写真のほとんどをそのまま見せられるので、写真を主役にしたいバナーなどで使いやすい方法です。

帯の濃さの考え方はオーバーレイと同じで、見本付きの説明は写真とデザインカラーの組み合わせとは?で紹介しています。

方法4:影や縁取りは控えめにつける

4つめは、文字そのものに影(ドロップシャドウ)や縁取りをつけて、背景との境目をはっきりさせる方法です。

ただし、濃い影や太い縁取りをつけると、一気に古くさい、素人っぽい印象になりがちです。

週末限定マルシェ

NG:くっきりした太い縁と濃い影

週末限定マルシェ

OK:ぼかした影で文字の周りをふんわり暗く

影の存在感を出すのではなく、文字の周りだけを少し暗くするのがコツ

右の見本のように、影は位置をずらさず大きくぼかして、文字の周りがふんわり暗くなる程度にとどめると、自然に仕上がります。

縁取りをつける場合も、線は細くして、背景と同化しない最低限の補強にとどめましょう。

CSSで右の見本のような影をつけるには、text-shadowでずれを0にして、ぼかしを大きめに指定します。

.hero-title {
  color: #ffffff;
  /* ずれ0・ぼかし大きめで、文字の周りをふんわり暗く */
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}

なお、影や縁取りだけでは、真っ白な部分の上では読みにくさが残ることがあります。

明るい部分が広い写真では、方法2や方法3と組み合わせると確実です。

ブランドカラーと読みやすさを両立するには

読みやすさを優先して文字を白にすると、「ブランドカラーの赤が使えなくなった」と迷うことがあります。

ブランドカラー(企業やサービスを象徴する色として、ロゴやサイト全体で使い続ける色)は、無理に文字そのものに使う必要はありません。

週末限定マルシェ

NG:文字をブランドカラーの赤にした

週末限定マルシェ出店者を見る

OK:文字は白、赤は下線とボタンに

ブランドカラーを文字以外の部分に回して、読みやすさと一貫性を両立した例

右の見本のように、文字は白にして読みやすさを確保し、ブランドカラーは下線やアイコン、ボタンなどに使うと、ひと目で「そのブランドらしい」デザインになります。

ブランドカラーをボタンに使うときは、ボタンの中の文字との組み合わせでも読みやすさを確かめましょう(見本の赤#C8102Eと白い文字は約5.9:1です)。

ブランドカラーを色々な場所で使い分ける方法は、ブランドカラーをWebに展開する方法とは?で解説しています。

実践のポイント

写真の上に文字を配置するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

写真の一部分だけを見て文字色を決め、文字が重なるほかの部分で読めなくなっていることに気づかないことがあります。
文字の後ろで一番明るい部分(または一番暗い部分)を基準に確かめましょう。
パソコンでは読めていたのに、スマートフォンでは写真の切り取られる位置が変わり、文字の後ろに明るい部分が来てしまうことがあります。
画面の幅を変えて、どの幅でも読めるか確かめましょう。
読みにくさを補おうとして、影・縁取り・オーバーレイを全部濃くかけ、写真も文字も重たい印象になることがあります。
まずは方法1か方法2の1つで解決できないかを考え、足りない分だけ足しましょう。

よくある質問

Q. オーバーレイはどのくらいの濃さにすればいい?
A. 文字の後ろにある一番明るい部分で決めます。
白に近い部分の上に白い文字を置くなら、大きな見出しで45%以上、小さな文字で60%前後が目安です。
写真全体が暗めなら、もっと薄くても読めます。
Q. 読めているかどうかは、どうやって確かめればいい?
A. 画像編集ソフトやブラウザのスポイト機能で、文字の後ろの一番明るい部分の色を取り、文字色とのコントラスト比をWebAIM Contrast Checkerなどのツールで測ります(手順はコントラスト比とは?で解説しています)。
本文サイズなら4.5:1以上、大きな見出しなら3:1以上が目安です。
Q. オーバーレイは黒以外の色でもいい?
A. ブランドカラーなどの色を半透明で重ねることもできます。
ただし色によっては写真の色味が大きく変わり、明るい色だと文字との明るさの差も広がりにくいので、まずは黒で試すのが確実です。