web-dev-qa-db-ja.com

(背景色に関連して)ハイコントラストのテキスト色を動的に選択する

私のアプリケーションには、いくつかのコントロールがある領域があります。各コントロールの背景色は、ある種の状態を表します。コントロールは、フォアグラウンドのテキストを介して番号が付けられています。例えば:

enter image description here

問題は、すべての可能な背景色とよく対比する前景テキストの1つの色を見つけることができなかったことです。また、可能であればこれを動的にしたいと思います。また、以下の色よりも多くの色があります。具体的には、黄色のため、白いテキストが見づらくなります(最初は、白い背景を除いてすべてに白を使用することを考えましたが、これもうまくいきません)。

ですから、私の考えは、実行時に背景と比較してコントラストの高い色を動的に見つけることです。ただし、これは、コントロール間でテキストの色が異なることを意味します。これが、ユーザーにとって少し奇妙または不快に見える可能性があることを懸念しています。

ここの他の誰かが同様の問題に取り組む必要がありましたか?この問題に関する一連のガイドラインはありますか?

14
Ed S.

背景色を十分に明るくすると、テキストはすべて黒くなります...

enter image description here

また、背景色の暗めのバージョンに番号を付けました。ライトグレーの番号付けは、白以外では対照的に機能しません。しかし、暗い赤は、たとえば明るい赤によく見えます。

13
Steve Wortham

テキストを見やすくするために、グレースケールのコントラストは色のコントラストよりも重要です。白または黒のテキストを使用して、背景色がどうであれ、最大のグレースケールコントラストを実現します。黒または白のテキストを使用すると、前景色と背景色のどちらがユーザーの注意すべきカラーコードであるかについての混乱も回避されます。

黒または白のテキストを使用するかどうかを動的に決定するには、次の式を使用して、「典型的な」モニターの背景RGBのグレースケールの明るさを計算します。

Y = 0.2126 * (R/255)^2.2  +  0.7151 * (G/255)^2.2  +  0.0721 * (B/255)^2.2

Yが0.18以下の場合は、白いテキストを使用します。 0.18より大きい場合は、黒いテキストを使用します。これにより、比較的小さなフォントであっても、テキストが読みやすくなります。 WCAGアクセシビリティ要件 に準拠していることも確認できます。

Breaking the Color Code で、コントラストとカラーコーディングの詳細について、カラーコードの相互の違いを最大化する方法を含めて説明します。

17

私は単に暗い背景(たとえば、6、10(?)、12行目)に白を使用し、明るい背景(他の背景)に黒を使用します。

私はかつてカラーホイールでできるだけ離れた色を使用しようとしましたが、黒または白のいずれかがまだ優れていることがわかりました。

(ここでは、背景色に応じて前景色を切り替えることができると想定しています。)

2
Paŭlo Ebermann

背景色と同じように、ステータスに関連付けられている前景色だけを用意しませんか?背景色(または非常に広い範囲の色)を動的に変更しない限り、実行時に前景色を動的に変更するのはやりすぎであり、プロセッサーリソースをかなり浪費します。

0
Charles Boyung