男性の20人に1人、女性の500人に1人が何らかの色覚に異常を持っていると言われています。ここでは色覚障害者への配慮について説明します。

このページは、晴眼者向けに視覚障害、色覚障害および高齢者へのWebページ制作上の注意点を記述しています。
そのため、「悪い例」としてアクセシブルではない記述を行なっている個所および、文法的に不適切な個所があります。ご了承ください

色だけで情報を伝えないこと

例えば下記のようなグラフを例にとってみます。

晴眼者に見えるグラフの色の画像

折れ線グラフの色が商品ごとに異なっているため、色覚に問題がない人には各商品の推移が分かります。

しかし、色覚障害を持っている方がこのグラフを見たらどうなるでしょうか。下に、P型色覚(1型色覚)、D型色覚(2型色覚)の見え方をシミュレーションした結果を示します。

P型色覚(1型色覚)のシミュレーション結果

D型色覚(2型色覚)のシミュレーション画像:悪い例

D型色覚(2型色覚)のシミュレーション結果

P型色覚(1型色覚)のシミュレーション画像:悪い例

D型色覚(2型色覚)、P型色覚(1型色覚)共に、商品の識別ができないことが分かります。これは「色だけ」で情報を伝えているために起きる現象です。

色以外に、線の種類を変えてシミュレーションしたのが下記の結果です。

P型色覚(1型色覚)のシミュレーション結果:良い例

D型色覚(2型色覚)のシミュレーション画像:悪い例

D型色覚(2型色覚)のシミュレーション結果:良い例

P型色覚(1型色覚)のシミュレーション画像:悪い例

色だけでなく、線の種類という情報を加えることでかなり改善されていることが分かります。


もう一つ、地図の例をあげてみます。埼玉県の地図に、何らかのエリアをマッピングした例です。(地図画像提供:Craft MAP

晴眼者に識別可能な地図の画像:悪い例

凡例も記述されていますし、健常者には、はっきりとエリアの区別が付きます。

これを、P型色覚(1型色覚)、D型色覚(2型色覚)としてシミュレーションしてみます。

P型色覚(1型色覚)のシミュレーション結果

D型色覚(2型色覚)のシミュレーション画像:悪い例

D型色覚(2型色覚)のシミュレーション結果

P型色覚(1型色覚)のシミュレーション画像:悪い例

かなりエリアの区別が付きにくいことが分かります。そこで、エリアごとのの塗りに色以外の情報を加え、ラベルも付けてみた結果が下記の画像です。

P型色覚(1型色覚)のシミュレーション結果:良い例

D型色覚(2型色覚)のシミュレーション画像:悪い例

D型色覚(2型色覚)のシミュレーション結果:良い例

P型色覚(1型色覚)のシミュレーション画像:悪い例

これらのシミュレーション結果を見ることで「色だけで情報を伝え」てはいけないということがお分かり頂けると思います。

関連ページ

アクセシビリティの必要性

色覚障害者への配慮(前景色と背景色のコントラストに注意するなど)

視覚障害者への配慮(文書構造と視覚表現の分離など)

視覚障害者への配慮(日付、時刻などの表記に注意する、線形化されたテーブルを利用するなど)

アクセシビリティリンク集


開発実績

株式会社ターフの主な開発実績

Webアクセシビリティ

株式会社ターフのアクセシビリティへのこだわり

オフィシャルブログ

つれづれなるままに



株式会社ターフ 埼玉県さいたま市浦和区北浦和4-1-11 岩崎ビル2F 35.871336, 139.645848 TEL: 048-814-3025