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

質問

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

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

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

回答No.6

DrFell · ベストアンサー

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

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

お礼

ありがとうございます。

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

回答No.5

神崎 渉瑠（@taloo）

連続失礼。

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

お礼

ありがとうございます。

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

回答No.4

神崎 渉瑠（@taloo）

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

お礼

ありがとうございます。

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

回答No.3

ORUKA1951

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

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

お礼

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

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

回答No.2

ORUKA1951

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

　色で区別するよりは、明度で区別したほうが良いでしょう。明度を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)だと見えにくいから、
単にこの数値では表せないですよね。

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

回答No.1

noname#224283

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

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

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

お礼

ありがとうございます。

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