[解決済み】背景色によって文字色を白や黒にする方法は？

質問

この例のように、いくつかの画像を表示したいのですが

塗りつぶしの色は、データベース内の16進数のフィールドで決定されます（ex:ClassX -> Color: #66FFFF）。 そこで、選択した色で塗りつぶした上にデータを表示したいのですが（上の画像のように）、その色が暗いのか明るいのかが分からないと、文字が白になるのか黒になるのかが分かりません。 何か方法はありますか？

解決方法は？

私の 同様の質問に対する回答 .

赤、緑、青のそれぞれの強度を得るには、16進コードを3つに分割する必要があります。コードの各2桁は、16進数（ベース16）表記で値を表します。変換の詳細はここでは省きますが、調べるのは簡単です。

個々の色の強度がわかれば、全体の強度を決定し、対応するテキストを選択することができます。

if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff

186という閾値は理論に基づいたものですが、好みに応じて調整することが可能です。以下のコメントに基づいて、150のしきい値の方がより効果的である可能性があります。

---

編集する 上記はシンプルでそれなりにうまく機能し、ここStackOverflowでも好意的に受け入れられているようです。しかし、以下のコメントの1つに、状況によってはW3Cガイドラインに準拠しない可能性があることが示されています。そこで、ガイドラインに基づいて常に最も高いコントラストを選択するように修正したフォームを導出します。もし、あなたが しない W3Cのルールに準拠する必要がある場合は、上記のシンプルな数式を使用します。

での対比のために与えられた式は W3C勧告 は (L1 + 0.05) / (L2 + 0.05) ここで L1 は最も明るい色の輝度であり L2 は、最も暗い部分の輝度を0.0～1.0のスケールで表します。黒の輝度は0.0、白の輝度は1.0なので、この値を代入することで最もコントラストの高いものを決定することができる。黒のコントラストが白のコントラストより大きければ黒を使い、そうでなければ白を使う。テストする色の輝度を L というテストになります。

if (L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05) use #000000 else use #ffffff

これは、代数的に単純化すると

if L > sqrt(1.05 * 0.05) - 0.05

あるいは、およそ

if L > 0.179 use #000000 else use #ffffff

あとは計算するのみ L . その式はまた ガイドラインに記載されている で、sRGBからリニアRGBへの変換が続くようです。 ITU-R勧告BT.709 を輝度用として使用します。

for each c in r,g,b:
    c = c / 255.0
    if c <= 0.03928 then c = c/12.92 else c = ((c+0.055)/1.055) ^ 2.4
L = 0.2126 * r + 0.7152 * g + 0.0722 * b

0.179という閾値は、W3Cのガイドラインに縛られているため、変更しない方がよいでしょう。もし結果がお気に召さないようでしたら、上記の簡単な式をお試しください。