【CSS】背景と文字の色を反転させたい！（mix-blend-mode）

2023.01.182026.09.30

CSSで背景と文字の色を反転させる！「mix-blend-mode: difference」の使い方と仕組み

はじめに

福岡を拠点にホームページ制作・SEO対策を行う株式会社スゴヨクです。

Webデザインにおいて、「背景が画像や複雑な配色のときに、文字を読みやすくしたい」という場面は多いですよね。そんな時に非常に便利なのが、CSSのプロパティ**「mix-blend-mode: difference;」**です。

一見難しそうに見える「色の反転」ですが、仕組みさえ理解すれば驚くほど簡単に実装できます。今回は、初心者の方でも分かりやすいように、具体的な計算式やコード例を交えて解説します。

→「【LINE URLスキーム】ラインアプリを起動させて、デフォルトのテキストメッセージを送信してもらいたい！」はこちら

CSSの「mix-blend-mode」プロパティとは？

基本的な役割

「mix-blend-mode」は、「子要素のコンテンツ」と「親要素（背景など）」の色をどのように混ぜ合わせるかを指定するプロパティです。Photoshopなどのデザインソフトにある「レイヤーのブレンドモード」と同じイメージです。

よく使われる値には以下のようなものがあります。

normal：初期値。背景色とブレンドせず、そのまま表示します。
multiply（乗算）：絵の具を重ねたように色が暗くなります。
screen（スクリーン）：光を重ねたように色が明るくなります。
difference（差分）：今回解説する、色を反転させる際に使用する値です。

「mix-blend-mode: difference;」の仕組み

背景色と文字色を反転させるには「difference（差分）」を使います。

このプロパティの仕組みは、**「重なっている要素同士のRGB値の差の絶対値」**を表示するというものです。
「絶対値」と聞くと難しく感じますが、以下の「白と黒」の例で考えると非常にシンプルです。

具体的なコード例（白と黒の反転）

HTML

<div class="hanten">
  <p>反転したいテキスト</p>
</div>

CSS

.hanten {
  background: rgb(255, 255, 255); /* 親要素：白背景 */
  color: rgb(0, 0, 0);           /* 文字色：黒 */
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hanten::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;                    /* 半分だけ重ねる */
  height: 100%;
  background: rgb(255, 255, 255); /* 重ねる色は「白」がポイント！ */
  mix-blend-mode: difference;    /* ここで反転を実行 */
}

なぜ色が反転するのか？（計算の仕組み）

RGB値（0〜255）を使って計算してみましょう。

背景色の変化：
親の背景（255, 255, 255）から、子の擬似要素の背景（255, 255, 255）を引きます。
255 - 255 = 0 となり、結果は rgb(0, 0, 0) ＝黒 になります。
文字色の変化：
元の文字色（0, 0, 0）から、子の擬似要素の背景（255, 255, 255）を引きます。
0 - 255 = -255 ですが、絶対値をとるため 255 となり、結果は rgb(255, 255, 255) ＝白 になります。

このように、「白（255）」を重ねることで、元の色が完全に反転するという仕掛けです。

実装の大事なポイント

「difference」と「白背景（rgb 255, 255, 255）」はセット

色を綺麗に反転させたい場合、重ねる要素には必ず rgb(255, 255, 255) の「白」 を指定してください。黒（0, 0, 0）を重ねても、差分が生まれない（変化しない）ため注意が必要です。

応用：背景画像の上での文字反転

この手法は、単色背景だけでなく**背景画像（background-image）**の上でも非常に有効です。

写真の上に文字を載せる際、写真の明るい部分と暗い部分が混在していると、文字が読みづらくなってしまいます。そこで「mix-blend-mode: difference;」を適用した要素を重ねると、画像の色味に合わせて文字色が自動で反転するため、視認性を劇的に向上させることができます。

スタイリッシュなFV（メインビジュアル）や、スクロールに合わせて色が変わるヘッダーなどの演出によく使われます。

注意点：対応ブラウザの確認

実装前に、ブラウザの対応状況を確認しておきましょう。

対応状況: Chrome, Firefox, Safari, Edgeなど、主要なモダンブラウザではすべて対応しています。
非対応ブラウザ: Internet Explorer (IE) は非対応です。

現在のWeb制作ではIEを考慮するケースは少なくなっていますが、古い環境をターゲットにする場合は注意が必要です。詳細な対応状況はCan I Useで確認できます。

アクセシビリティとコントラスト比

「mix-blend-mode: difference;」はデザイン性が高い反面、**アクセシビリティ（視認性）**には配慮が必要です。

背景が中間色（グレーなど）の場合、反転後のコントラストが十分に確保できず、文字が読みづらくなるケースがあります。実装後は必ず「十分なコントラスト比（WCAG基準など）が保たれているか」を、目視やチェックツールで確認するようにしましょう。

CSSで文字色を反転させる3つの方法【比較表】

CSSで文字色（や背景色）を反転させる方法は、主に次の3つです。背景と重なった部分だけを自動で反転させたいならmix-blend-mode、要素全体の色をまとめて反転させたいならfilter: invert()、狙いどおりの色を確実に出したいなら反転色を直接指定する方法が向いています。

方法	反転の仕組み	向いている場面	注意点
mix-blend-mode: difference	下にある色との差分で色が決まる	背景画像や動く背景の上で、重なった部分だけ文字色を切り替えたい	背景の色によって文字色が変わるため、狙った色になりにくい
filter: invert(1)	要素の色をすべて反転する	アイコンやロゴなど、要素をまるごと反転したい	文字・背景・画像がまとめて反転される
反転色を直接指定	計算した反転色を color や background-color に指定する	ホバー時の白黒反転など、色を正確に管理したい	色ごとにコードを書く必要がある

filter: invert() で色を反転する方法

filter: invert() は、要素の色を反転させるCSSのフィルターです。値は0〜1（または0%〜100%）で指定し、1（100%）で完全に反転します。

/* 要素全体の色を反転する */
.invert {
  filter: invert(1);
}

/* 半分だけ反転する（グレーに近づく） */
.invert-half {
  filter: invert(0.5);
}

黒いアイコン画像を白く見せたい場合など、画像を差し替えずに色を反転できるのが便利な点です。一方で、指定した要素の中身（文字・背景・画像）がすべて反転するため、文字だけを反転させたい場合は、次に紹介する「反転色を直接指定する方法」が確実です。

反転色の求め方と主な色の一覧

反転色は、RGBの各値を「255から引く」ことで求められます。たとえば赤 rgb(255, 0, 0) の反転色は rgb(0, 255, 255)（シアン）です。16進数のカラーコードなら、各桁を「F − その桁の値」に置き換えても同じ結果になります。

元の色	カラーコード	反転色	カラーコード
白	#FFFFFF	黒	#000000
赤	#FF0000	シアン	#00FFFF
緑	#00FF00	マゼンタ	#FF00FF
青	#0000FF	黄	#FFFF00
オレンジ	#FFA500	青	#005AFF
グレー	#808080	グレー	#7F7F7F

グレーの反転色がほぼ同じグレーになるように、中間色は反転しても見た目がほとんど変わりません。文字と背景が同化して読めなくなる原因になるため、中間色を使うデザインでは注意しましょう。

ホバー時に文字と背景を白黒反転させる方法

ボタンやリンクにマウスを乗せたときに、文字と背景の色を入れ替える（白黒反転させる）表現もよく使われます。この場合は、:hover で color と background-color を入れ替えるのがもっともシンプルです。

.btn {
  display: inline-block;
  padding: 12px 24px;
  color: #000;
  background-color: #fff;
  border: 2px solid #000;
  transition: color 0.3s, background-color 0.3s;
}

.btn:hover {
  color: #fff;
  background-color: #000;
}

transition を指定しておくと、色がなめらかに切り替わります。枠線（border）を文字色と同じ色にしておくと、反転後もボタンの形が崩れません。

よくある質問

Q. mix-blend-mode を指定しても文字色が反転しないのはなぜですか？
→ 混ぜ合わせる相手となる背景色が指定されていないことが主な原因です。本記事の「実装の大事なポイント」で紹介したとおり、親要素に白背景を指定しているか確認してください。また、親要素に isolation: isolate; が指定されていると、その外側の背景とは混ざらなくなります。

Q. 文字だけを反転させて、背景はそのままにできますか？
→ できます。文字を含む要素にだけ mix-blend-mode: difference; を指定すると、背景と重なった文字部分だけが反転して見えます。要素ごと反転させたい場合は filter: invert(1); を使います。

Q. filter: invert() と mix-blend-mode はどちらを使うべきですか？
→ 要素そのものの色を反転したいなら filter: invert()、背景との重なりに応じて色を変えたいなら mix-blend-mode が向いています。迷ったときは、上の比較表を参考に選んでください。