12日目：安全に色を使う
今回はWebデザインの色んな場面に関わってくる、一般的なルールについての秘訣を伝授するね。そのなかでも特にここでは、ブログによくある例として、リンクテキストをあげて説明しようと思う。
色に関して問題になる可能性がある要素は2つ。まずリンクテキストの色と背景色のコントラストが充分ないこと。どれ系の色を選んでも、すごく明るい色は白い背景と組み合わせるとまずい。リンクテキストがすっかり背景にとけ込んじゃったりする。暗い色のテキストと黒の背景とも同じような感じ。ホントはこういったことってリンクだけじゃなくてどんなテキストにも言えるんだけど、ブログでよくあるのが普通の文章はちゃんと読めるのに、リンクだけわざとじゃないのに読みにくい状態になってるのをよく見かける。だからリンクのことを強調しとこうと思ったんだ。
もうひとつは、リンクの装飾。CSS でリンクの色を指定して変えたりしてるなら、色以外でもそれがリンクだってことがわかるようにしておこう。たとえば太字にするとか、斜体にするとか、下線をつけるとか。でなきゃ、リンクテキストはしっかり読めたとしても、色盲のひとにはそれがリンクだってことが伝わらないもん。以下にもうちょっと詳しく書くね。
誰がトクする？
マイケルが喜ぶ。これはリンクの装飾を3種類用意したもののスクリーンショットサンプル。
上のように、最初の文章のリンクは初期設定の色の組み合わせを使ってる。ビジュアルブラウザで見たときには、青と紫のコンビネーションで、下線がひかれている。次のリンクはテキスト装飾が2つのかたちで適用されてて、太字で赤（下線はなし）。3つめの装飾は1種類だけ。文字の色が赤になってる。
それじゃこの3つ、マイケルにはどう見えると思う？
上のように、1つめはリンクだってわかる。マイケルの色盲は、青って色には影響しないんだ。2つめの文章では、リンクの赤はほとんど黒に近く変わって映る。でもリンクが太字で表されてることに変わりはないから、マイケルにもこれが文章の他の部分とは違うのはわかる。問題は3つめの場合。前に見たときは、字が赤であるってことだけが、この部分がリンクなのを示す唯一の手がかりだったよね。その赤さが黒っぽくなっちゃったら、どこがリンクでどこが普通のテキストなのか、判別するのははっきり言ってムリだ。
どうしたらいい？
テキストと背景の色に「充分コントラストがあるか」をチェックするには、VisCheck を使って色盲のユーザにそのサイトがどう見えるかのシュミレーションをしてみるといい。
リンクの装飾の問題をチェックするには、CSS の "a" タグのルールを見てみて。たとえば、CSSにこんなルールが入ってるとしたら？リンクは色が赤いってことでしか識別できないってことだから、こりゃマズいよね。
a { text-decoration: none; color: red; }
リンクは別に赤のままだってかまわないよ。ただそれだけじゃなくて、太字、下線がひいてある、斜体でもあるようにしてほしい。ここではリンクを赤いだけじゃなく太字にもなるように指定してみよう。この1行を足してみて：
a { text-decoration: none; color: red; font-weight: bold; /* この行を付け足す */ }
さらなる情報源（英語）
- VisCheck では色盲のシュミレーションができて、色盲だとどういう風に見えるのかをテストできる。画像ごとでもページ丸ごとでもチェック可能。
- Cal Henderson: Color Vision。色んなタイプの色盲の場合の色のスペクトルの見えかたを参照できる。
- 石原式色覚検査では、赤緑色盲のひとには違って見えたり全く見えなかったりするイメージ画像を紹介。