画像が読み込めない時の alt テキストを contrast-color() で読めるようにする

どんな時に使う？

画像の読み込みに失敗すると、ブラウザは代わりに alt テキストを表示する。ところが文字色と背景色が近いと alt が見えなくなる（例: ダーク背景のヒーロー画像など）。img 自体に、文字色に対してコントラストが付く背景色を敷いておく保険テクニック。

コード

img {
  /* currentcolor（＝文字色）に対して読みやすい白か黒を自動選択 */
  background-color: contrast-color(currentcolor);
}

• contrast-color() は与えた色に対してコントラストが高い色（現状は白または黒）を返す関数。
• 画像が正常に表示されれば背景はほぼ見えない（透過PNG等は除く）。

注意点・対応状況

• 透過画像では背景色が透けて見えるので、透過画像を使う箇所では除外する（例: img:not([src$=".png"]) やクラスで制御）。
• contrast-color() は比較的新しい関数。対応状況は Can I use で確認し、未対応時のフォールバック（何も起きない）で問題ないか検討する。
• 投稿者自身も「いいかも？」という提案ベースの小技。

出典

• @tak_dcxi · 2026-10-08