色だけに依存しない (その1)

Webサイトには様々なユーザーが来訪します。その中には、色の識別が苦手なユーザーも少なからずいます。そういったユーザーに対して、どういうことを気をつけたらいいか、について2回にわたってご紹介したいと思います。今回は、「どんな人がいるのか?」「何が問題なのか?」について触れたいと思います。

どんな人がいるのか?

加齢によって色の認識能力が落ちている人や、白内障などで色がクリアに識別しにくい人がいます。また、色覚特性を持った人もいます(色覚特性は、一般的には色盲色弱色覚異常などと呼ばれることが多いですが、コラム記事「色の認識の特異性に関する呼称について」でも触れたように、当サイトでは「色覚特性」と表現しています)。色覚特性には、大きく分けて、以下の3種類があります。

  • 第一色覚特性(赤の視感度がないか弱い):P型(Protanope/Protanopia)
  • 第二色覚特性(緑の視感度がないか弱い):D型(Deuteranope/Deuteranopia)
  • 第三色覚特性(青の視感度がないか弱い):T型(Tritanope/Tritanopia)
詳しくは、CUDO(カラーユニバーサルデザイン機構)の「色が見える仕組みと色弱者のタイプ」が参考になります。ちなみにCUDOでは、いわゆる色覚特性の無い人を「色覚正常」や「健常」などとは呼ばずに、上記の「P型」「D型」「T型」と並列する概念として、「C型」と分類しているそうです。

何が問題なのか?

Webサイトで提供される情報において、その意味や機能、重要度などが、色だけで区別されているケースがあります。色の識別が苦手なユーザーがこのようなコンテンツを見た場合、こうした「意味」「機能」「重要度」に気づきにくく、その結果、ユーザー自身がスムーズに目的を達成することができない、ひいてはフラストレーションを感じてしまう、という結果になり得ます。具体的には、以下のような例が挙げられるでしょう。色覚特性を持つユーザーにどう見えるか、というシミュレーション画像と並べてみました。

リンク文字(クリックできる箇所)や強調箇所などが、色だけで区別されている例

下図は、Webページのテキストの例です。強調箇所(冒頭の「Lorem ipsum」)が濃い赤色で、クリッカブルなリンクテキスト(4行目の「commodo consequat」)が緑色で表現されていますが、たとえば第二色覚特性(D型)のユーザーがこれを見た場合、強調箇所とクリック箇所を混同しそうになることがわかります。

「C型(色覚特性が無い)」の人が見た場合
強調箇所とリンクテキストの表示例(C型)
「D型(第二色覚特性)」の人が見た場合
強調箇所とリンクテキストの表示例(D型)

図や表、グラフなどでデータを表す要素が、色だけで区別されている例

下図に示した例は、ロンドンの地下鉄路線図です。図のほぼ中心にある「Oxford Circus」駅と、その左側にある「Notting Hill Gate」駅のあたりをご覧いただくと、たとえば第一色覚特性(P型)のユーザーがこれを見た場合、Bakerloo線(茶色で表示)、Central線(赤色で表示)、District線(緑色で表示)の識別が難しいことがわかります。

「C型(色覚特性が無い)」の人が見た場合
地下鉄路線図の表示例(C型)
「P型(第一色覚特性)」の人が見た場合
地下鉄路線図の表示例(P型)

Webアクセシビリティの観点で、上記のようなシミュレーションをご覧いただくと、色だけに依存して情報の意味や機能、重要度を区別して提示することが、ユーザーに情報を伝達する上でいかにリスキーか、をイメージしていただけることと思います。

次回のコラム記事では、色だけに依存した情報提供を防ぐための、具体的な検証方法や対策について、ご紹介したいと思います。