いかがでしょうか。 グレー(#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をセットにすると背景色にもフィルターが適用されてし
![CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する - Blanktar](https://cdn-ak-scissors.b.st-hatena.com/image/square/e4222419080bc01e0a579fdad918b6538a97845f/height=288;version=1;width=512/https%3A%2F%2Fblanktar.jp%2Fblog%2F2020%2F11%2Fcss-automate-foreground-text-color.png)