白い文字と黒い文字を出すための背景

ページの背景色で悩んでいます。

白い文字と黒い文字を同時に出したいのですが、
背景色は何色だったら、両方とも見えやすくなりますか？

自分はこの色がいい！って案だけでも良いです。

No.6 ベストアンサー 回答者： DrFell 回答日時： 2012/03/10 09:03

明度が白と黒のど真ん中が両方見やすいと思います。

お手持ちのカラーピッカーで明度50％、50％付近なら、何でもいいのでは？色相がどの位置かは見易さとは関係ないと思います。

一応、手持ちの明度（Bright）50％のものを貼り付けます。

この回答へのお礼

ありがとうございます。

カラーピッカーで明度５０％の色を使えば大丈夫ですね。
参考になりました。

お礼日時：2012/03/22 09:05

No.5 回答者： taloo 回答日時： 2012/03/10 03:56

連続失礼。

CSS3が使えるなら、text-shadowで白い文字に黒い陰を付けておけばいわゆる白抜き文字になりますので、白い背景でも問題なく読めます。
text-shadowが使えるブラウザ（の利用率）が少ないので、一般向けのサイトであれば推奨しませんが、イントラネットなどや、ブラウザ限定サイトであれば問題はないと思います。

この回答へのお礼

ありがとうございます。

一般向けです。
しかも携帯でも使えるのならtext-shadowを使いたいのですが、
IEですら、表示できないのなら携帯でも表示しませんよね……。

お礼日時：2012/03/22 09:03

No.4 回答者： taloo 回答日時： 2012/03/10 03:48

いわゆるパステルカラーなら、たいてい合うんじゃないでしょうか。

この回答へのお礼

ありがとうございます。

実は、パステルカラーだと薄すぎて白文字が見づらいです。
パステルカラーの少し濃い色がいいですね。

お礼日時：2012/03/22 08:55

No.3 回答者： ORUKA1951 回答日時： 2012/03/08 16:37

実際にどういう内容なのかを示していただけると良いアイデアがあるかも・・

以前、
このＣＳＳ（エディタ風）効果はどのように？サンプル - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/6757602.html )
で回答したことがありますが、このHTMLで背景をline-heightに合わせて色が変化する画像にして、テキストを並べるような方法もあります。
　文字色は一定ですが、背景が一行ごとに変化していきます。その方法が良いのは、ユーザーのウィンドウサイズに依存せず、どの位置で折り返されても一行ごとに背景色が変わります。

この回答へのお礼

こういった特殊なことがしたいわけではなく、
１色の背景に白文字と黒文字を出したいだけです。

その時にどちらの文字色でも見やすい背景色が欲しかったわけです。

お礼日時：2012/03/22 08:54

No.2 回答者： ORUKA1951 回答日時： 2012/03/08 11:55

難しいですね。

ウェブ標準(HTML4.01strict,CSS2.1,WAI,DOM)のWAIでは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
A.5. 色なしで見たときにテキストやグラフィックスが受領可能、理解可能であることを確かめましょう。[優先度1]
　そうでなくて、もし色が情報を伝達するために使われていれば、一定の色を識別できないユーザ(および非カラーまたは非視覚的表示装置を用いているデバイスのユーザ)は、その情報を受け取れないことになります。
　前景色と背景色とがあまり同一色調に近いと、モノクロディスプレイを使って見られたり異なる型の色覚障害を有する人々に見られたりするときに充分なコントラストがつけられない場合があります。
　テクニック:
　　1.マークアップやテキストからも情報が明確であるのでない限り色を使って情報を伝達しない。[優先度1]
　　2.色盲の人が見たり白黒スクリーン上で見たりするときに充分なコントラストを提供する色の組み合わせを前景色と背景色との間で使う。[優先度1]
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［WAIガイドライン:ページ制作( http://www.doraneko.org/wai/contents10/19980918/ … )］より

　色で区別するよりは、明度で区別したほうが良いでしょう。明度を256段階で考えると

p{margin:0 100%;line-height:1.6em;color:rgb(0,0,0);background-color:rgb(126,126,126)}
p:nth-child(2n){color:rgb(0,0,0);}/* なくてもよい */
p:nth-child(2n+1){color:rgb(255,255,255);}
とか、
また、背景色だけを
p{margin:0 100%;line-height:1.6em;color:rgb(0,0,0);background-color:white;}
p:nth-child(2n){background-color:white;}/* なくてもよい */
p:nth-child(2n+1){background-color:silver;}
変えるとか・・・
(注)nth-childはCSS3のプロパティです。CSS2.1で指定したい場合は、兄弟セレクタを使ってください。

　もちろん、色が変わる段落に特定の意味がある場合は
p{margin:0 100%;line-height:1.6em;color:rgb(0,0,0);background-color:white;}
p.SheTalk{color:fuchsia;}
p.HeTalk{color:navy;}/* 色調だけでなく明度も異なるもの */
とかであるべきですが・・

この回答へのお礼

ありがとうございます。

そうなんですよね。難しい所です。

白文字と黒文字が両方とも見えやすい色となると
白黒になった時に中間色のグレーになる色がベストなんですよね。

そう考えていけば、背景をどれにしたらいいのか……

でも、黒背景で青文字(0,0,256)や白背景で緑文字(0,256,0)だと見えにくいから、
単にこの数値では表せないですよね。

ベストな背景色は何色がいいんでしょうね。

お礼日時：2012/03/08 14:16

No.1 回答者： sakura0331mist 回答日時： 2012/03/07 20:18

赤…と思ったんですが、ちょっと怖い色合いですよね…；

灰色だとモノトーンで味気ないですし…

青緑色はどうでしょう？（＾ｖ＾）

この回答へのお礼

ありがとうございます。

赤だとチカチカしてしまいますが、青緑色は良いですね。

お礼日時：2012/03/08 09:27