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

いかがでしょうか。 グレー(#808080)に近い色はやや見づらくなってしまっていますが、それ以外はかなり上手く表示できているのではないかと思います。 やり方上記のサンプルは以下のようなCSSで実現しています。 ">Copy <div> <span>hello world!</span> </div> <style> div { background-color: red; } span { color: red; filter: invert(100%) grayscale(100%) contrast(100); } </style> 以上、これだけです。 詳しい解説は後述しますが、colorとbackground-colorに同じ色を設定してから、文字色だけCSSのfilterで見える色に変化させる仕組みです。 なお、divとspanをセットにすると背景色にもフィルターが適用されてし

[field_combat]

なるほど

[yarumato]

“背景色が動的に変わる状況で、文字色を良い感じに設定したい。背景色と同じ色を文字色にも設定して、CSSで filter: invert(100%) grayscale(100%) contrast(100); これだけ。中間付近の色（#808080とか）だと微妙だが基本上手くいく”

[kaputte]

すばらしいぞ

[ginpei]

invert()で反転させた上で、grayscale()とcontrast()で読みやすくする。反転しても変わらない中間色では使いづらいが、それ以外では良い感じ。