背景色に応じてフォントの色を白または黒に決定するにはどうすればよいですか? 質問する

Question

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 勧告 (WCAG 2.0)はで(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.04045 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 ガイドラインに結びついているため、変更しないでください。結果が気に入らない場合は、上記のより単純な式を試してください。

Answer 1

私の同様の質問への回答。