【CSS】背景と文字の色を反転させたい！（mix-blend-mode）
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基準など）が保たれているか」を、目視やチェックツールで確認するようにしましょう。
おわりに
「背景と文字の色を反転させたい！」という悩みや、「mix-blend-modeがうまく効かない」という方の参考になれば幸いです。
CSS1つでサイトの印象をガラッと変えられるテクニックですので、ぜひ自身のプロジェクトに取り入れてみてください。
この記事が役に立ったら、SNSでシェアしていただけると嬉しいです！
