背景色に合わせてテキスト色を自動で分ける

当サイトの【カラーチェックツール】で使っています。（★部分）

文字色を背景色と同じにして、フィルターで色を反転させモノクロ化して白黒どちらかに振り切っているだけなので、
文字色は白か黒のどちらかになる。
それなら最初から良さそうな文字色を指定したらいいのでは…とも言う…けど、【カラーチェックツール】みたいに機械的に使うときは楽ですw

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった

猫ふんじゃった


<div class="textColor_change">
	<p><span>猫ふんじゃった</span></p>
	<p><span>猫ふんじゃった</span></p>
	<p><span>猫ふんじゃった</span></p>
	<p><span>猫ふんじゃった</span></p>
	<p><span>猫ふんじゃった</span></p>
</div>


.textColor_change p:nth-child(1) { background-color: #9acd32; color: #9acd32;}
.textColor_change p:nth-child(2) { background-color: #d02090; color: #d02090;}
.textColor_change p:nth-child(3) { background-color: #007f92; color: #007f92;}
.textColor_change p:nth-child(4) { background-color: #eee; color: #eee;}
.textColor_change p:nth-child(5) { background-color: #6867cd; color: #6867cd;}

.textColor_change p span{
	filter: invert(100%) grayscale(100%) contrast(100);
	}

TOP