色覚に障害を持っていたとしたら、あなたのサイトは見えるでしょうか ?

Robert Hess
Microsoft Corporation

October 9, 2000
日本語版最終更新日 2000年12月14日

これまでの一連の記事では色に関連する問題について説明しましたが、皆さんの中から、色覚に障害を持つユーザーが見るのにふさわしい Web サイトの色を選択する方法について情報が欲しいとの要望が寄せられました。このような要望に応えて、このトピックについて調査しました。この要望を理解するのに役立つだけでなく、さらに読みやすい Web サイトを作成するのに役立つ情報を提供します。

まず、色覚に障害があるとはどういうことなのかを確認しましょう。色がまったくわからない、または物がすべてモノクロで見えるということではありません。"色覚不足 (認識可能な色が少ない)" という表現の方が適切でしょう。

色覚のしくみ

すべては眼 (具体的には眼球の "錐体") から始まります。学校で、眼球には捍状体と錐体が含まれていて、これらが光を感じることを学びました。捍状体と錐体はこの感光を脳に伝え、脳で画像が構築されて私たちは周囲を見ることができます。

図 1. 正常な色覚

捍状体と錐体の基本知識について説明します。この基本知識を理解している方は、「ソリューションの発見」セクションに進んでください。

捍状体の数は錐体よりもはるかに多く、光のスペクトルの中央部分の明るさの違いに感応します。もし捍状体しかなければ、すべてがモノクロに見えます。眼球の錐体が色覚を提供します。錐体には 3 つの種類があります。

• L 錐体は、主に可視スペクトルの赤の部分に感応します。
  
  
• M 錐体は、緑の部分に感応します。
  
  
• S 錐体は、青の部分に感応します。

赤、緑、および青の領域は可視スペクトル内でほぼ均等ですが、L、M、および S 錐体の視感度は均等ではありません。これは少し混乱を招くかもしれません。特に L 錐体の視感度はスペクトルの赤の領域に集中していません。幸い、錐体のスペクトル視感度は、脳が色情報を解読する方法のほんの一部に過ぎません。そのほかの処理はこれらの視感度を考慮に入れます。

図 2. 3 つの白い曲線は 3 種類の錐体の視感度レベルを示します。黒の曲線は捍状体の視感度を示します。
Dowling, John E. (1987); The Retina : An Approachable Part of the Brain
Belknap Pr; ISBN: 0674766806

色覚の障害

色覚の障害は、1 つ以上の種類の錐体がすべて正常なレベル以下で機能している、またはまったく機能していない場合に発生します。色覚に影響を与える遺伝子は X 染色体の一部であるため、色覚不足は女性よりも男性に強く影響します。男性の約 8% に何らかの色覚不足があるのに対し、女性で色覚不足がある人は約 0.5% に過ぎません。

ここでは、色覚不足の異なる形式の名前を紹介します。サンプルの色相環と各色のパレットを用意しました。色覚不足のさまざまな分類によって色がどのように見えるかを実際に参照する方法はほとんど見つかりませんでしたが、これらはスペクトルの表現として受け入れられているようです。これらを見ると、"赤"、"緑"、または "青" が見えないことと直接的にはまったく関連がない理由について少しとまどう可能性があります。ここでは 2 つの要因が働きます。1 つは、上記のグラフが示すように、錐体の実際の色の視感度はスペクトルの特定の領域内に直接的に集中していないことです。2 番目の要因は、色と画像を捍状体/錐体の応答と実際に関連付け、補足を試みながら色覚に障害のあるユーザーの見る色が変更されるようにする、脳での詳細な処理に関係します。

	"第一色盲" は、男性人口の約 1% に影響します。 第一色盲は赤の視感度がなく、赤の二色型色覚とも呼ばれます。可視スペクトルの赤の部分への視感度を提供する L 錐体の機能が失われていることが原因です。赤は可視スペクトルの端にあり、ほかの 2 種類の錐体の視感度とは部分的にしか重複しません。そのため、第一色盲の人にはスペクトルの赤側の端の光に対する視感度がありません。 "第一色弱" は、男性人口の約 1% に影響します。 第一色弱は赤色弱のことで、L 錐体は機能していますが本来のレベルに達しない場合に発生します。
	"第二色盲" は、男性人口の約 1.1% に影響します。 第二色盲は緑の視感度がなく、緑の二色型色覚とも呼ばれます。可視スペクトルの緑の部分への視感度を提供する M 錐体の機能が失われていることが原因です。スペクトル内の緑の位置、M 錐体 (緑) と L 錐体 (赤) の間の実際の視感度の重複、および S 錐体 (青) の視感度との部分的な重複により、第二色盲の人はスペクトル全体に対してほぼ正常に近いレベルの視感度を持っています。ただし、個々の色の区別は困難です。 "第二色弱" は、男性人口の約 4.9% に影響します。 第二色弱は緑色弱のことで、M 錐体は機能していますが本来のレベルに達しない場合に発生します。
	"第三色盲" は、男性人口の約 0.001% に影響します。 第三色盲は青の視感度がなく、青の二色型色覚とも呼ばれます。これは色覚不足のすべての形式の中で最も一般的でないもので、可視スペクトルの青の部分への視感度を提供する S 錐体の機能が失われていることが原因です。青はスペクトル内で赤とは反対側の端にあり、S 錐体の視感度はほかの 2 つの錐体と重複が少ないため、第三色盲の人のスペクトルに対する視感度の喪失はずっと深刻なものとなります。 "第三色弱" は青色弱を表しますが、色覚不足の形式として報告されたケースはないようです。全体的に見て S 錐体は眼球内の錐体の 10% に過ぎないためではないかと考えられます。異常に気付く頃には、大部分の錐体が機能しなくなっています。

注 : 上記の色サンプルは、http://www.labs.bt.com/people/rigdence/colours/colours1.html (英語) に記載されているデータから構築されたパレットを使用して作成されました。

ソリューションの発見

上記のパレット内の色を見ると、何らかの色覚不足に苦しむ人々には、あなたが Web サイトに対して苦心して選択した色が確実に見えない様子がよくわかります。

具体的な例として、次のことに直面していると想像してください。

続行するには緑のボタン、 ヘルプが必要な場合は黄のボタン、 終了する場合は赤のボタンをクリックします。

簡単に見えますね? しかし、次のように見えたとしたらどうでしょうか。

または

または

実際、Web サイトでこのようなシナリオが発生することはあまりないと思います。"続行"、"ヘルプ"、または "終了" のラベルを付けたボタンを定義するほうが簡単です。ページ上で場所を取ることもありません。しかし、このようなことは、Web ページ上だけでなく、実際の生活でも起こります。

解決法は、ユーザーに伝える情報を示すために色を使用しないようにすることです。色は、ユーザーへの重要でないヒントとしてのみ使用します。

色のコントラスト

色に関する以前の記事で説明したように、色を選択する場合の 1 つの重要な要素は、テキストを読みやすくする前景色と背景色の際立ったコントラストです。これは、色覚の障害を配慮する場合には、さらに重要となります。

先に示した色相環を見てください。まずページの一番上にある正常な色覚の色相環を参照してください。

色覚に障害のあるユーザーが識別できる色の数は、色覚が正常なユーザーが識別できる色の数よりも大幅に少なく、色相環の近隣の多くの色は実質的に同一の色に見えることがわかります。このことがサイト設計に対して選択する内容にどのような影響を与えるかを確認するために、色の例について考えてましょう。

適切な色選択ではないことはわかっていますが、これが実際に多くのサイトで使用されている色選択です。これらの色は派手に見えるかもしれませんが、色覚が正常であれば、表示されているメッセージを読むことができます。しかし、色覚に障害がある場合にはどうでしょうか。

色覚に障害のあるユーザーにとって適切であることを示すには、グレー スケールに変更して色選択が適切に動作することを確認するだけで十分だと考える人がいるかもしれませんが、全く根拠がありません。画像が使用するパレットをグレー スケール パレットに変更して、どのように見えるか確認してみましょう。

これを見て、美しい配色とは言えないにしても色覚に障害のあるユーザーにとっては問題はないと考えるかもしれません。しかし、本当にそうでしょうか。もっと詳しく見てみましょう。今度は、色覚に障害のあるユーザーから見た内容により近づくパレットを適用します。

第一色盲 :

第二色盲 :

第三色盲 :

第三色盲の人は実際ここでは運が良いように見えます。彼らが見る色は私が正常な色覚で見る色よりも少し魅力的です。しかし、グレー スケール パレットは印象としては適切に思えますが、多くの色覚に障害のあるユーザーにとっては適切な色の組み合わせではないことがわかります。

適切な色選択を実践するデザイナであれば、決してこの特定の配色を選択することはありません。代わりに、情報を見やすくするために、コントラストの大きい色の選択をします。何らかの理由で、この "黄色の背景に対する緑色のテキスト" という色の組み合わせが必要だとします。デザイナーは何が行えるでしょうか。以前の記事で一方の色を濃くし、もう一方の色を明るくするとコントラストが大きくなることを学習しました。したがって、色調を変えずに明るさと彩度を変更してコントラストを向上させましょう。

正常 :

第一色盲 :

第二色盲 :

第三色盲 :

この特定の色選択はそれでもあまり良い組み合わせではありませんが、元のものよりはずっと良くなりました。このような小さな変更だけでも、元の色選択の基本意図を保持しながら、色覚に障害があっても読むことができるテキストを作り出すことができます。

画像ファイルからカラー パレットを抽出し、"最も近い色" および "インデックスの保持" の両方を使用してパレットを適用できる PaintShop Pro (英語版) などの描画アプリケーションがある場合は、以下の画像で色選択をテストすることができます。"正常" の画像は 216 色の セーフ パレット (英語) を表します。そのほかの画像は同じインデックスを保持しますが、色覚に障害のある方が見える色を反映するように、色は変更されています。

正常 :

第一色盲 :

第二色盲 :

第三色盲 :

これらの各画像のパレットを個別のパレット ファイルに保存したら、以下の手順に従って自分の画像をテストします。

1. PrintScreen キーを使用して配色のスクリーン ショットをキャプチャします。
   
   
2. この画像を画像ツールに貼り付けます。
   
   
3. "最も近い色" 方法を使用して "正常" パレットを適用します。
   
   
4. "インデックスの保持" 方法を使用して色覚不足パレットのいずれかを適用します。
   
   

多数の描画アプリケーションがカラー パレットの使用および保持をサポートしますが、新しいパレットに切り替えられたときにカラー インデックスを保持するオプションを提供する場合があります。使用するアプリケーションがこの機能をサポートするかどうかわからない場合は、ソフトウェアの製造元または別のユーザーに問い合わせてください。

ユーザーと協調した色選択

この実習が示すように、多くの場合、すべてのユーザーが適切に見ることができる色を選択することは非常に困難です。この困惑に加え、ユーザーによって色覚不足の程度もさまざまで、色の違いには大きな幅があります。次に、モニタが適切に調整されていない可能性を検討します。適切に調整されていないと、正常な色覚のユーザーでもコントラストが適切に見えません。これらの要因が組み合わさることにより、適切な色の選択が重要なだけでなく困難なものとなります。

Web サイトの色を選択するときに、ユーザーがページに表示される色を選択できるようにすることもできます。これは難しそうに見えますが、それほどではありません。カスケーディング スタイル シートのサポートには、"ユーザー スタイル シート" の概念が既に含まれていて、ユーザーは Web デザイナーが選択した内容よりも優先されるスタイルを指定することができます。ただし、このようなスタイル シートを一般のユーザーが構築することは困難な場合があり、Web ページのレイアウトを台無しにしてしまう可能性があります。

ユーザーとの作業をもっと簡単に行う方法は、ユーザーが Windows オペレーティング システムに対して選択した色と同じ色をさまざまな UI コンポーネントを表示するために利用する方法です。コントロール パネルの [画面] を使用して、ユーザーは Windows アプリケーションなどを表示および使用するための表示色を既に調整しています。同じ配色を使用した場合、Web サイトは安全です。ただし、この方法の欠点は、現時点では Microsoft Internet Explorer だけがこれらのキーワードを使用するため、"ブラウザ非依存" ではないことです。

システム色を使用する場合は、色の値の代わりに適切なキーワードを使用します。たとえば、

<font color="#FFCC9"> 

を使用する代わりに以下のキーワードを使用すると、

<font color="windowtext">

ユーザーが Windows オペレーティング システムのテキスト色として選択した色がフォントの色に使用されます。

以下は使用可能なキーワードです。最初の一覧には、適切な "テキスト" と "背景" の色を組み合わせたキーワードが含まれています。

次の一覧には、一致するコントラスト色とペアになっていない色が含まれています。これらの色は背景またはテキスト色には適していません。名前が暗示する機能を反映する場合に使用する必要があります。

配色にこれらのシステム色を使用することに関心を持つユーザーがいる場合に備え、以前の記事に掲載した Dynamic HTML ツールをさまざまなシステム カラーを含むカラー パレットを提供する新バージョン (英語) に変更しました。

十分に考えなければならないことが多数あるように見えますが、ユーザーに提供しようとするコンテンツについて考え、ユーザーが実際にそれを読めることを確認することが重要です。単に綺麗に見える色の組み合わせを選択するだけでは十分ではありません。私たちすべてに影響する色覚の程度の違いを検討することも重要です。

色覚に障害を持つユーザー向けの設計に関する詳細については、以下のリンクを参照してください。

• Microsoft Accessibility Web サイト
  このサイトで、Microsoft はさまざまな障害を持つ人々がアプリケーションに簡単にアクセスできるようにする方法に関する情報を提供しています。また、Microsoft が自社のオペレーティング システムおよびアプリケーションに追加するユーザー補助機能に関する情報も記載されています。
  
  
• 「But Can They Read It? (...でもそれ、読めるの?)」
  この記事では、Microsoft のアクセシビリティのディレクターである Greg Lowney が、アプリケーション設計において色が果たすさまざまな役割、および開発者がさまざまな種類の視覚障害を持つ人々がアプリケーションを使用できるようにするための方法について説明します。
  
  
• 「Safe Web Colours for Colour-Deficient Vision」
  この優れた記事では、BT Laboratories の Interaction Designer である Christine Rigden が、色覚に障害のあるユーザーを考慮して行った Web 設計での研究を共有します。
  
  
• 「Effective Color Contrast」
  Lighthouse International の Vision Science 担当副社長である Aries Arditi, Ph.D が、ほとんどすべての人が使用できる有効な色選択に関する基本的なガイドラインを紹介します。サンプル画像も多数含まれています。

Robert Hess は、MSDN Show (英語) を担当しています。