ラベルのように、背景色をユーザーが自由に決めて、中に表示するテキストの色を計算で導出する、ということを実装する時に調べたことのメモです。追記)前半はYUVという色空間の輝度情報に変換してしきい値で判断する方法を紹介していますが、こちらはアクセシビリティの観点からあまりオススメできません。実装する際は「アクセシビリティを考慮して文字色を求めてみる」の章を参考にしていただくのがオススメです。使うのはRGBの指定だと思います。今回はRDBに背景色のデータを保存するので、16進数6桁のRGB値に固定すると扱いやすそうなので、背景色はこの指定方法に決めました。#ffffff;何を基準に文字色を判断するのか何も分からなかったので、とりあえずRGBの値それぞれを合計してしきい値で判定すればできたりするのかなー、と思って試してみたんですが、どうもうまくいきません。簡単に言ってしまえば「明るい色」の時は黒、「暗い色」の時は白と判定するだけなのですが、明るいか暗いかはRGBのままでは判定できないようです。いうわけでいろいろ調べていると、YUVという色表現のうちのY(輝度)を使うと良さそう、というところまでたどり着きました。見ると普通に計算式が載っていました。こんな感じで求められます。Blueしきい値を決めるこれに関しては実際に試してみて確認してみました。境に文字色を変更するようにしました。追記)コメントで、アクセシビリティ観点のコメントを頂きました。見た目だけで判定していましたが、コントラスト比を考慮して判定したほうがより良い結果が得られそうなので、試してみました。詳細を詳しく見たい方はこちらも見てみてください。今回試したやり方としては、背景色に対して白と黒の文字色のコントラスト比をそれぞれ求めて、より高いコントラスト比のものを採用する、という方法をとってみました。計算方法は以下の記事を参考視させていただきました。255})で扱っているのでご注意ください。(文字列で扱うと色々面倒だったので・・・)相対輝度を求めるW3Cの定義では相対輝度に変換してから、コントラスト比を計算するようです。コードだとこのようになります。B;}コントラスト比を求める相対輝度を求められるようになったので、2の色(背景色と文字色)からコントラスト比を求めます。コードだとこのようになります。0.05);}白と黒の文字色のどちらが適切かを判定するコントラスト比を算出できるようになったので、後は白と黒のどちらの文字色がよりコントラスト比が高いかを判定すれば、適切な文字色が分かります。コードだとこのようになります。BLACK}画面上で確認してみる実際に画面で試してみました。たしかにYUVでコントラスト比が低い部分は見やすくなったと思います。【YUVでの算出な方法】コントラスト比で算出する方法まとめYUVの話はなくなってしまいましたが、こちらの方が結果としては良さそうですね。アクセシビリティ的にあまり良い方法ではなかったです🙇‍♂️おわりにYUVというのを今回調べて初めて知りましたが、こういう使い方のときに便利ですね。似たような実装が必要になった際は参考にしてみてください。いう判定の仕方のほうが良いというのをご存じの方おられましたら、教えていただけると嬉しいです。