背景色に合わせて文字色を変更する

JavaScriptを使用せずに、背景色に合わせて文字色を変更する方法を2種類試してみます。

サンプル

1つ目はfilterを使用する方法です。
いくつか色パターンを用意して試してみます。

<div class="box c000000">
  <div class="text">#000000</div>
</div>
<div class="box cff00ff">
  <div class="text">#ff00ff</div>
</div>

次にCSSですが、背景色と同色で文字色を指定するようにします。

.text {
	filter: invert(100%);
}

.c000000 {
	background-color: #000000;
}
.c000000 .text {
	color: #000000;
}
〜 略 〜
.cff00ff {
	background-color: #ff00ff;
}
.cff00ff .text {
	color: #ff00ff;
}

背景色と文字色を同じ色にした上で、文字色をfilterのinvert()で反転させています。
これで背景色によって文字色を変更させることができました。
filterを使用するデモページ

上記でもとりあえずはできていますが、色によっては文字が見えにくいので、filterのgrayscale()でグレースケールに変換してみます。

.text {
	filter: invert(100%) grayscale(100%);
}

filterを使用するデモページ2

一部見にくい文字色があるので、さらにcontrast()でコントラストを上げてみます。

.text {
	filter: invert(100%) grayscale(100%) contrast(1000%);
}

filterを使用するデモページ3

2つ目はmix-blend-modeを使用する方法です。
HTMLはfilterの時の例と同じです。

先ほどは背景色と文字色を同色にしましたが、今回は文字色を白色にした上で、mix-blend-modeでdifferenceを指定します。

.text {
	color: #ffffff;
	mix-blend-mode: difference;
}

.c000000 {
	background-color: #000000;
}
〜 略 〜
.cff00ff {
	background-color: #ff00ff;
}

これでfilterの時の最初のデモに近い状態になりました。
filterの場合は複数の値を設定して見た目を調整しましたが、mix-blend-modeの場合は1つのみの設定になります。
mix-blend-modeを使用するデモページ

filterの例では背景がベタ塗りの場合のみの対応でしたが、mix-blend-modeの場合は背景画像の場合も文字色を変更できます。

<div class="box">
  <div class="text">サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div>
</div>

テキストの親要素に背景画像を設定します。

.box {
	background: url(img.jpg) center center no-repeat;
	background-size: cover;
}
.text {
	color: #ffffff;
	mix-blend-mode: difference;
}

この場合でも、背景画像の色に応じて文字の色が変更されました。
mix-blend-modeを使用するデモページ2

見た目上はfilterを使用する方がきれいですが、背景色と同色の文字色の指定が必要だったり、mix-blend-modeの場合は背景画像の場合でも文字色の変更が可能など、それぞれの方法にメリットとデメリットがあります。
なので、使用時の要件などによって適宜選択するのがよさそうです。