web-dev-qa-db-ja.com

特定の背景色に適したテキストの前景色

色選択ボタンを描画し、RGBの特定の背景色に対して適切なテキスト色（前景）を取得するための素敵でシンプルな数式を探しています。

単純な試みは補色のみを使用することですが、これにより、純粋な青や純粋な赤などの色の奇妙な外観のボタンが生成されます。
これを行うことがよく知られているものはありますか？

まったく問題がある場合は、QTを使用しています。

user-interfacetextcolorsbackground-color
72
shoosh

読みやすさを最大限にするために、一緒に機能しない色相に入ることなく、最大の明るさのコントラストが必要です。これを行うための最も一貫した方法は、 黒 または 白 テキストの色。あなたはより審美的に楽しいスキームを思いつくことができるかもしれませんが、それらのどれもより読みやすくなりません。

黒または白を選択するには、背景の明るさを知る必要があります。次の2つの要因により、これはもう少し複雑になります。

  • 個々の原色である赤、緑、青の知覚される明るさは同一ではありません。私ができる最も迅速なアドバイスは、従来の式を使用してRGBをグレーに変換することです-R * 0.299 + G * 0.587 + B * 0.114。他にもたくさんの公式があります。

  • ディスプレイにガンマカーブを適用すると、中間のグレー値が予想よりも高くなります。これは、128ではなく186を中間値として使用することで簡単に解決できます。186未満の場合は白のテキストを使用し、186を超える場合は黒のテキストを使用します。

121
Mark Ransom

私はRGBに関連するプログラミングの専門家ではありませんが、デザイナーの観点からは、最も読みやすい色は多くの場合より明るい（背景色が暗い場合）または暗い（背景色が明るい場合）バージョンです同じ色合い。

基本的には、RGB値を使用し、それらが0（暗い）に近い場合は、前景色に対してそれぞれ同じ量だけ押し上げます。明るいBGの場合は、その逆も同様です。

補色は、実際には読みやすさの点で非常に苦痛です。

11
Gabriel Hurley

読みやすさの概要を活用する

By "good text color（foreground）"ユーザーが選択したときにlegibility目的のために意図している場合any background colour、常に黒いアウトラインを持つ白いテキストを作成できます。黒から白、そしてその中間のあらゆるものまで、あらゆる固体、パターン、またはグラデーションの背景で読みやすくなります。

enter image description here

これがあなたの意図に反していなくても、同様の解決策を探しに来たので、ここに投稿する価値があると思います。

9
John K

マークの応答に基づいて、ここにいくつかのRuby作業を行うコードがあります

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"
4
Darren Hicks

明度の差が大きい方が良いでしょう。一般に、色付きのテキストを含む色付きの背景は読みやすさを損ね、時間とともに目を傷つけます。黒のテキストを使用した薄い色（HSB、S〜10％、B> 90％など）は正常に機能するか、黒の背景に薄い色のテキストを使用します。私は両方を着色するのを避けます。暗いテキスト（b〜30％、s> 50％）に白い背景の上に微妙な色が付いている場合も問題ありません。濃い青の背景の黄色（mber色）のテキストは、黒のa色または緑のように、読みやすくなっています。これが、古いダムターム（vt100、vt52など）がこれらの色を採用した理由です。

「見た目」のためにカラーオンカラーを本当に行う必要がある場合は、HとBの両方を反転させ、中程度から低レベルで彩度を固定することができます。

最後に、背景が50％グレーの場合、インターフェイスを再考します。ダイナミックレンジの半分を奪っています！ 35歳以上のユーザーを含む、視認性の低いユーザーを疎外しています...

3
Alex Feinman

色の組み合わせは、慎重に選択しないとひどく見えることがよくあります。色の明るさに応じて、テキストに白または黒を使用しないのはなぜですか。 （最初にHSBに変換する必要があります。）

または、ユーザーに黒または白のテキストを選択させます。

または、事前定義された組み合わせを使用します。これは、Googleがカレンダーサービスで行っていることです。

2
Larry K

私はsimailrの回答を探していましたが、この投稿と私が共有したいと思った他のいくつかに出会いました。 http://juicystudio.com/services/luminositycontrastratio.php#specify によると、「WCAG 2.0の成功基準1.4.3にはテキストの視覚的提示が必要であり、テキストの画像にはコントラスト比がいくつかの例外を除き、少なくとも4.5：1 "。そのサイトでは、前景色と背景色を使用してコントラストを計算できますが、代替案または範囲を提案する場合に役立ちます。

色のコントラストを視覚化するために見つけた最高のサイトの1つは http://colorizer.org/ です。これにより、ほぼすべてのカラースケール（RGB、CMYKなど）を同時に調整できます。時間が経過すると、黄色の背景に白いテキストなどの結果が画面に表示されます。

1
elg

私は通常、色の補色を見て、それらを助けるために色の補色ホイールも持っています

http://www.makart.com/resources/artclass/cwheel.html

色がHSLの場合、適切な計算のために色相を180度反転します

0
Bob