【CSS】背景色に合わせて文字色を自動的に設定する！

こんにちは、ワタナベです。

本日はCSSで背景色に合わせて文字色を自動的に設定する方法のご紹介。

Sample

See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.

背景色と同じ色を文字色に設定し、「filter」で自動的に文字色が調整されるようになっています。

filterで、

invert(100%)【色反転】、grayscale(100%)【グレースケール】、contrast(100)【コントラスト】

の設定を行っています。

大体の色は問題なく表示されると思います！中間色だけ注意が必要です。（#808080は「invert()」が効かず、サンプルのようにかなり見づらくなるので避けた方が◎）

▼THANKS！

 Blanktar  74 users

CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する

https://blanktar.jp/blog/2020/11/css-automate-foreground-text-color

背景色が動的に変わる状況で、文字色が見えなくならないように良い感じに設定したい時があります。JavaScriptで書いても良いのですが面倒なので、CSSのfilterを使って上手いことやってもらう方法をご紹介します。

 原色大辞典  215 tweets 3162 users

WEB色見本 原色大辞典 - HTMLカラーコード

https://www.colordic.org

色の名前とカラーコードが一目でわかるWEB色見本

それではまた次回。

ご閲覧ありがとうございました♪