CSSのbackground-blend-modeは画像と背景色だけを重ねて文字の可読性を別に確認する

背景画像へ色を重ねたいときは、background-blend-modeを使います。これは要素の背景画像と背景色を混ぜるpropertyです。見出しや本文まで背景と混ぜたいわけではないなら、文字へmix-blend-modeを指定しません。

画像の明るさだけに任せて白い文字を載せると、画像が変わった場所で読めなくなります。画像の見え方と、文字を読めることは別の条件です。背景を重ねたあと、見出し、本文、buttonを実際の画像で確認します。

二つのblend modeは混ぜる対象が違う

W3CのCompositing and Blending Level 1は、mix-blend-modeを要素と背後の色を混ぜるpropertyとして、background-blend-modeを背景layerどうしと背景色を混ぜるpropertyとして定義しています。background-blend-modeの背景layerは、要素の後ろにあるcontentとは混ざりません。

この違いは、文字を置くhero imageで特に重要です。写真を暗く見せたいだけなら、背景として置いた画像と色を混ぜれば足ります。見出しやlogoへblend modeを指定すると、写真の明るい部分と暗い部分で文字の色が変わります。同じ文字色を指定していても、背後の画像によって読め方が変わるため、ブランド色を保ちたい文字には目的と合わないことがあります。

背景を二重にする方法は、写真そのものを加工したfileを作る方法とは違います。CSSで色を重ねれば、元の画像を差し替えても同じ処理を適用できます。ただし、写真の構図まで整うわけではありません。人物の顔や商品の文字の上へ見出しが重なる場合は、色を暗くしても読みやすくならないことがあります。画像を選ぶ段階で、文字を置く余白があるかを見ます。

例えば写真を暗くして白い見出しを載せる場合、背景要素へ暗い背景色と画像を指定し、background-blend-mode: multiplyを使います。文字は通常の色で置きます。文字までmix-blend-modeで混ぜると、写真の色によって読め方が変わります。

buttonも文字と同じように扱います。背景画像の上にoutlineだけのbuttonを置くと、画像の明るい箇所では輪郭が消えることがあります。buttonの背景色、文字色、境界線を、通常時だけでなく押す前と操作中の状態でも見ます。背景を濃くすることと、buttonを押せることは別の条件です。色を一つ変えるたびに、利用者が次に何を押すか分かるかを確認します。

画像を替えたときに確認する場所を決める

背景画像は季節やpageごとに替わります。同じCSSでも、白い壁の写真と暗い木立の写真では、文字やbuttonの見え方が変わります。画像を更新する作業と、画面を確認する作業を分けないでください。

1. 見出しが載る場所、本文が載る場所、buttonの周囲を決める。
2. 明るい画像と暗い画像の両方を背景へ置く。
3. desktopとmobileで、文字とbuttonの境界を確認する。
4. hoverやfocusで色が変わるbuttonも操作する。
5. 読めない場所があれば、画像の位置、背景色、文字色の順に直す。

background-blend-modeは画像加工の代わりに使えますが、画像を選ばなくてよくなるpropertyではありません。文字を載せる場所を意識して撮影や選定を行い、CSSはその差を整えるために使います。

確認には、実際に使う画像だけでなく、条件の悪い画像も用意します。空や白い壁が大きい写真、暗い室内の写真、細かい模様がある写真を背景にして、見出しとbuttonを置きます。一枚だけで読めても、別の画像で読めなければ、共通の背景処理としては足りません。画像ごとに文字色を変え続けるのか、背景の濃さを変えるのか、画像の位置を変えるのかを決めます。

mobileでは、背景画像の切り取り方も変わります。desktopで文字の後ろにあった暗い部分が、狭い画面では外れ、明るい部分へ文字が重なることがあります。画面幅を縮めたときに画像を横から見るだけでなく、実際に見出し、本文、buttonが置かれる位置で確認します。文字を読ませるために画像の主題を切り落とすなら、背景の役割そのものを見直します。

背景の演出で操作を隠さない

背景を濃くしても、buttonの輪郭やformの入力欄が消えればpageの目的を果たせません。見た目を変える手段と、問い合わせや閲覧を進める目的を混同しないでください。

背景を変える作業を外部へ頼む場合は、画像を差し替える人とCSSを直す人が別かを確認します。画像だけを更新する担当者が、どの部分に文字が載るかを知らなければ、読めない画面を作りやすくなります。反対にCSS担当者だけが画像を決めると、内容や写真の目的を無視した暗さになることがあります。画像の選定、文字の位置、確認する画面を一つの作業表に残します。

最初の一手は、背景画像を使うpageを一つ開き、最も明るい部分と最も暗い部分に見出しを置いた状態で読むことです。そこで読みにくいなら、blend modeを増やす前に文字と背景の関係を直します。

確認する画面を決めずに画像だけを替えると、見た目の好みで修正を繰り返しやすくなります。見出し、本文、buttonという読む順に確認すれば、何を直すための色かを判断できます。