良い文字色の指定された背景色

StackOverflow https://stackoverflow.com/questions/946544

質問

私の描画カラーの選択ボタンを探しているも簡単にテキストの色(前景色)指定された背景色のRGB.

簡単にいうだけでは補色が本作の奇みボタンの色のような純青色は純粋な赤。
ものがあるのか、それは何なのかよく知られていな。

な事項のすべてが、私が使っているQT.

役に立ちましたか？

解決

最大読みやすい最大限の明るさコントラストに入らずの色合いではない。最も整合的に行うここだわりがあると 黒 または 白 このテキストカラーです。ることができるかもしれませくより美しいスキームでより読みやすくするためです。

おと黒または白を把握しておく必要があり、明るさの背景になります。このう少し複雑化により二つの要因

  • との認識を明るさの予備選が照射赤、緑、青色で異なる場合がございます。最短の助言を日本語訳を見てもわかりませんは、伝統的な式変換RGBグレー-R-0.299+G*0.587+B*0.114.多くの他の式に代入します。

  • のガンマ曲線が適用"をテーマにした展示を中グレー値によります。これは簡単に解決186としての中央値ではなく128.何よ186は白文字、以186は黒います。

他のヒント

私は、RGBに関連するプログラミングの事には何の専門家だが、（背景色が軽い場合）設計者の観点から、多くの場合、最も読みやすい色がちょうどはるかに軽い（背景色が暗い場合）、または暗くなります同じ日陰のバージョンます。

基本的に、あなたのRGB値を取ると思い、彼らが0（暗い）に近いなら、それは光BGだ場合、あなたのフォアグラウンドカラー、またはその逆のために等しい量によってそれらそれぞれを押し上げると思います。

補体の色は、実際に読みやすくするために、目に本当に痛みを伴うことができます。

の の読みやすさのアウトラインを活用

ユーザーがany background colourを選択したときに

のあなたはの読みやすの目的のためにそれを意図し、の「良いテキストの色（フォアグラウンド）」によるならば、あなたはいつも白いテキストが黒の輪郭を有する生成することができます。これは、黒から白との間で何を介して、任意の固体またはパターン化勾配背景に判読可能であろう。

ここに画像の説明を入力します

これはあなたの意思のマークをヒットしない場合でも、

、私は同様のソリューションを探して来たので、それは価値があるが、ここに掲載さだと思います。

マルコ応答の上に建物が、ここでの仕事をやる、いくつかの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"

あなたは、輝度の高い差のほうが良いです。一般的には、色付きのテキストと色の背景には、時間をかけて目を傷つけて、読みやすくするために吸います。軽く着色色（例えばHSBで、S〜10％、B> 90％）黒テキスト作業罰金、または黒背景上に軽く着色テキストを含みます。私は両方の着色から離れていたいです。白い背景の上に微妙な配色とダークテキストは、（B〜30％、S> 50％）も細かいことができます。黒にオレンジ色または緑色と同様に深い青色の背景上にイエロー（黄色）のテキストは、優れた読みやすさを有しています。古いdumbterms（などVT100、VT52は、）これらの色のために行った理由はここにあります。

あなたが本当に「見」のためのカラー・オン・カラーを行うために必要がある場合はローレベルに適度に彩度を固定しながら、

、あなたは、HとBの両方を逆転できます。

そして最後のノート：あなたは50％グレーの背景を持っている場合は、あなたのインターフェイスを再考。あなたは半分のあなたのダイナミックレンジのことは自分を奪っています！あなたは35以上の誰も含め、低視程のユーザーを疎外している...

慎重に選ばれていないとき

の色の組み合わせは、しばしばひどい見えます。なぜ色の明るさに応じて、テキストを白または黒のいずれかを使用しません。 （最初のHSBに変換する必要があります。）

あるいは、ユーザが黒または白のテキストのいずれかを選択できます。

または事前に定義された組み合わせを使用します。これは、Googleが自分のカレンダーの製品に何をするかです。

私はsimailr答えを探していると私は共有したいと考え、この記事や他のいくつかに出くわしてきました。 http://juicystudio.com/services/luminositycontrastratio.php#specifyするによります "いくつかの例外を除いて1" ：WCAG 2.0の達成基準1.4.3は、テキストのテキストおよび画像の視覚的なプレゼンテーションは、少なくとも4.5のコントラスト比を持っている必要があり。そのサイトは、あなたがそれを代替または範囲を示唆している場合、それが参考になるが、そのコントラストを計算するために前景色と背景色に置くことができます。

私は色のコントラストを可視化するために見つけた最高のサイトの一つは、 http://colorizer.org/ のことですこのような黄色の背景上の白いテキストとして、同時にカラースケール（RGB、CMYKなど）のほぼすべての方法を調整し、画面上にあなたの結果を示します。

私は通常色の補完を見て、彼らはまた、支援するために、カラー補完ホイールを持っている。

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

あなたの色はHSLの場合は、まともな計算のために180度色相を反転

HSVに変換する方法かもしれませんが、IMO色相を変更すると奇妙に見えるだろうと、私の事。 I色相を維持し、価値と多分彩度をいじってみたい（暗赤色のテキストで光赤いボタン... HMは怖い:-)の音）。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top