ぼかし背景に合う文字色は？WEBデザインで読みやすさを保つ配色

ぼかし背景の上に文字を置くと、写真の細部は目立ちにくくなっても、明るい部分と暗い部分の差までは消えません。この記事でいう「ぼかし背景」は、写真自体をぼかした背景や、CSSの backdrop-filter で要素の背後をぼかした面を指します。文字色は「ぼかしているか」ではなく、文字の直下にある実際の明るさを基準に選ぶのが基本です。

明るいぼかしには濃い文字、暗いぼかしには白、混在する場合は文字面を作る

明るいぼかし面なら、本文にはチャコール ■#20252B のような濃い文字色が使いやすくなります。反対に、暗いぼかし面では白 ■#FFFFFF が候補です。ただし、写真や動画を背景にすると場所ごとに明るさが変わるため、背景が「だいたい明るい」「だいたい暗い」だけでは判断できません。

CSSの backdrop-filter は、要素の背後にぼかしなどの効果を適用します。効果を見せるには、その要素の背景が透明または半透明である必要があります。半透明の面では、最終的な背景色が背後の画像によって変わるため、宣言した背景色と文字色だけを比べても実際のコントラスト比は確定しません。明暗が混在する場合は、文字の背面に不透明な面を置くと確認しやすくなります。

読みやすさを保つ3つの配色例

1. 明るいぼかし面には濃い文字を使う

明るいカードなら、チャコール ■#20252B を本文と見出しに使い、背景は明るい半透明面にします。

.blur-card {
  color: rgb(32 37 43);
  background: rgb(247 249 251 / 84%);
  backdrop-filter: blur(16px);
}

この半透明面の実際のコントラストは背後の画像によって変わるため、実画面で確認します。安定した文字面が必要なら、文字の背面だけを不透明なオフホワイト ■#F7F9FB にします。チャコール ■#20252B とのコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約14.62:1です。

2. 暗いぼかし面には白文字を使い、必要なら不透明な濃色面で支える

夜景や暗い写真をぼかした背景では、白 ■#FFFFFF の文字が候補です。ただし、写真内に照明や空などの明るい部分が入ると、白文字とのコントラストが下がることがあります。その場合は、文字の背面に不透明なダークブルーグレー ■#26313B を置きます。白との比率は約13.25:1です。ぼかしを残したい部分と、文字を載せる面を分けることで読みやすさを安定させられます。

3. ボタンやリンクはぼかし背景と分離した色を使う

主要ボタンをブルー ■#315F78、ボタン文字を白 ■#FFFFFF にすると、コントラスト比は約6.91:1です。不透明なオフホワイト ■#F7F9FB 上で同じブルーをリンク文字に使う場合は約6.55:1です。操作部分は写真の明暗に直接依存させず、背景から独立した面や色で設計すると確認しやすくなります。

ぼかしだけでコントラストは保証されないため、最も条件の悪い部分を確認する

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字に4.5:1以上のコントラスト比が求められます。ぼかしは背景の細部を滑らかにできますが、文字と背景の明暗差が自動的に十分になるわけではありません。写真のトリミングや画面幅が変わると、文字の背後に来る部分も変わるため、主要な表示幅で最もコントラストが低くなる箇所を確認します。

背景の変化が大きく、どの位置でも読みやすさを保つのが難しい場合は、文字を写真の外へ移すか、不透明な文字面を追加します。HueRollでは6桁のHEX（Webで色を表す16進数コード）を入力し、関連色・配色候補や選択色と白・黒とのコントラストを確認できます。ただし、ぼかした写真上の各位置、任意の2色同士の比較、WCAGのAA・AAA自動判定には対応していないため、実際のぼかし背景上の文字は別途確認します。