定本！ ウェブデザインに於ける色遣い

2006年01月30日 更新 | タグ: アクセシビリティ

「“定本”とは、大きく出たな」という感じだが、ウェブデザインに於ける色遣いで、もしちょっと変わったことをしようとお考えの方は、ぜひここにあることをふまえて欲しい。まずは下記を参照されたい。

• ハイパーリンク文字列は青文字かつ下線が原則
• 本文色と背景色は高いコントラストを保つ必要がある

たったこれだけであるが、この２つがウェブデザインに於ける色遣いを規定し、またアクセシビリティ確保にとっても大きな意味を持つのだ。

ハイパーリンク文字列は青文字かつ下線が原則

もともとリンクを何らかのかたちで区別して読み上げる音声ブラウザを使っている人にとっては、たしかにあまり意味のないことであるが、視覚でリンクを認知する人たちにとっては、この「青文字かつ下線」というのが、もっとも一般的なハイパーリンクであるといえる。もっとも、さまざまな閲覧環境があるので、すべての人が「初期状態で青文字かつ下線のハイパーリンクを利用している」とはいえないが、ある種象徴的と言っていいほどに、このスタイル指定は、ハイパーリンクとして認知されている。つまり、青文字かつ下線にしておけば、だいたいのひとは、「あ、これをクリック（エンター）すると、どこかに続くんだ」ということを分かってくれるのだ。こんなに便利な慣習を、わざわざ利用しない手はない。……では、どういう措置が、このハイパーリンク認知を妨げるのか？

• スタイル指定で青文字、下線以外の指定をしてしまう
• スタイル指定で未訪リンクと既訪リンク色を同じにしてしまう
• リンク文字列でない文字列に青文字かつ下線（あるいはこのどちらか）をあてがう
• 未訪リンクと既訪リンクの色を同じにしてしまっている
• 背景色を青く設定してしまう

もちろんどんな原則にも例外はある。視覚上、それがリンクであることが自明の位置にある文字列（サイト内共通メニューなど）は、たとえば青でなくても、下線が無くとも、それがハイパーリンクだと分かるのであれば問題はないといえるだろう。

本文色と背景色は高いコントラストを保つ必要がある

この二つ目の条件は、じつはひとつ目の条件「ハイパーリンク文字列は青文字かつ下線が原則」と密接に関わりを持つ。既訪リンク、未訪リンクいずれについても、ハイパーリンク文字列を本文色と差別化することで認知を上げるとしたら、自ずと背景色のありかたがきまってくる。つまり「未訪リンク色（極力青）と既訪リンク色と本文色、そして背景色は、それぞれ異なっていなければならない」ということだ。

「ささいなこと」と思われる方もおられるかもしれないが、このことをふまえるだけで、「ひとへの伝わりやすさ」がましになる……と、かんがえれば、そうそうバカにできないものであるというべきである。

ツイートする