Wikibooks

ウェブユニバーサルデザイン/CUD

< ウェブユニバーサルデザイン
メインページ > 情報技術 > ウェブユニバーサルデザイン > ウェブユニバーサルデザイン/CUD

このページ (ウェブユニバーサルデザイン/CUD) では、「CUD」と呼ばれるカラーユニバーサルデザインについて、ウェブページの側面から解説します。

色覚特性

編集

CUDを語る上で、避けては通れないのが色覚特性を知ることです。人は目の視細胞によって色を感知しています[1]。この視細胞の働きによって「色覚」というものができます。多くの人は人間が見ることのできる色全てを感知できますが、一部の色覚を持つ人にはこれらが別の色に見えてしまう問題があります。これらに該当する人は社会において生活する上で支障をきたすことがあり、弱い存在になってしまいます。このような人々を「色弱者」と呼ぶこともあります[2]。さらに、この色弱者にも遺伝など生まれつきの先天的なものと、病などによる後天的なものがあります。

先天的色覚特性

編集

この色覚の内部にもいくつか違いがあり、その色覚は以下のように分けることができます[3]。

  • 赤緑色盲
    • およそ5%
  • 黄青色盲
    • およそ0.001%
  • 全色盲
    • およそ0.001%

これらのほか、色覚に異常がない多数派の人は「正常色覚」と呼ばれています。しかし、実際には赤緑色盲もさらに2つに区分できます。実態にあった解説ができるよう、この本ではNPO法人カラーユニバーサルデザイン機構 (CUDO) の提唱する以下の表記を使用します。

  • P型
    • 赤緑色盲のうちの1つで人口の約1.5%を占める。「1型2色覚」とも。
  • D型
    • 赤緑色盲のうちの1つで人口の約3.5%を占める。「2型2色覚」とも。
  • T型
    • 黄青色盲(0.001%)を指す。「3型2色覚」とも。
  • A型
    • 全色盲(0.001%)を指す。「1色覚」とも(1色覚には、すべての色を感じ取れないものと1つの色しか感じ取れないものがある)。
  • C型
    • 一般色盲 (正常色覚) を指す。「3色覚」とも。

赤緑色盲であるP型とD型の違いは、「どの色を感じ取りづらいか」です[4]。P型は赤色の波長を、D型は緑色の波長を感じ取りにくくなっていて[5]、これらの赤緑色盲は赤色から緑色の波長域で色の差が分かりづらくなります[6]。同様にT型、黄青色盲は黄色から青色の波長域で色の差が分かりづらくなります[7]。

 
正常 (C型) 色覚における赤色・緑色・青色・白色
 
P型色覚における赤色・緑色・青色・白色
 
D型色覚における赤色・緑色・青色・白色
 
T型色覚における赤色・緑色・青色・白色
 
A型色覚 (すべての色を感じ取れない場合) における赤色・緑色・青色・白色

後天的色覚特性

編集

上記の先天的色覚特性とは異なる、病などによる色覚特性には、以下のようなものがあります[8]。

  • 白内障
    • 肌色のレンズを通したような見え方
  • 弱視
    • コントラスト

誰にでも分かりやすいデザインの普及が急務となっています。

色覚特性に対する実態

編集

ウェブや色遣いにとどまらず、多くのユニバーサルデザインでは、「昔はそのようなものはなかったので、色盲は捏造である」とする考えを持つ方がいます[要出典]。しかし、これは正しくないと言えます。色盲の方は自分では気づきにくいことが多く、現代では幼い頃の教育の過程で知ることが可能になり、その実態が知られるようになったのです。

色覚特性の害

編集

一般に、契約書やポスター、説明書などの重要な部分には、強調として赤色がよく用いられています。しかし、赤色にすると、色弱者にはかえって見づらくなってしまいます。重要な部分だからこそ、すべての人に適したデザインが強く求められます。

赤色に近い強調色でかつ見分けの付きやすい色であれば、赤橙色などがあります[9]。それで不十分であれば、このように下に線を引いたり、文字そのものの大きさを変更してもいいでしょう。ただし、HTML5では、<big>タグは廃止されたことや、明朝体など一部が細くなるフォントを使用している場合は色をつけると見づらくなる場合がある[10]ことにご留意ください。

対応

編集

地図や図形などを部分ごとに色付けして区別することはありませんか。このような場合、2色や3色ならともかく(どの色覚特性の人にも対応した色使いができる)、10色ともなると、C型でも色の区別がしづらくなります。そのような場合、色だけでなく、模様 (右上がりの斜線や右下がりの斜線など) を用いることができます。後述の#区別しやすい色の色と模様を組み合わせると、例え2色でも2種類の模様と組み合わせれば、4種類の区分ができます。

区別しやすい色

編集

区別しやすい色の組み合わせは、以下の注意点に配慮することで覚えることなくある程度実行できます。

  • 淡い色同士
  • 暖色系もしくは寒色系同士
  • 濃い緑色と赤色もしくは茶色
  • 黄緑色と黄色
  • 橙色と水色

上記に挙げた内容は、避けるべき色の組み合わせです。極力避けましょう。やむをえずこれらの色を近接して使用する場合、色以外の対策に従ってください。

また、いくら識別しやすい色と言えども、面積が小さければ色の区別は困難になります。

色以外の対策

編集

上記の#区別しやすい色で示した「避けるべき色の組み合わせ」をどれか1つでも使用する場合は、その他の配色で代用できないことを確認した上で、もちろん区別しやすい色の組み合わせを使っていようとも、以下のような対策をとらなければなりません。

  • 斜線や記号の併用
  • 円グラフなど面積が重要な部分では間に区切りとなる線を入れる
    • 黒が望ましいが、白を使う場合は太く
  • 色名の明記
    • お近くにテレビのリモコンはありませんか。おそらく、リモコンの4色ボタン (「青」「赤」「緑」「黄」) には付近にそれらと合致する色名が印刷されているはずです。

これらの対策は、上記の#区別しやすい色で示した「避けるべき色の組み合わせ」をどれか1つでも使用する場合でなくとも考慮するべきでしょう。

確認

編集

デザインが終わったら、目視だけでなく、シミュレーションや白黒コピー、模擬フィルターなどでも確認しましょう。むろん、最も適しているのは実際に全てのパターンの色弱者に見え方を確認してもらうことです。

もちろん、色弱者の見え方に注意するあまり、一般色覚者に適さない状態であれば、それはユニバーサルデザインとして本末転倒といえるでしょう。すべての人に適したデザインがユニバーサルデザインであることをお忘れなく。

註

編集
  1. ^ (CUD事務局 2012, p. 6)
  2. ^ (CUD事務局 2012, p. 6)
  3. ^ (CUD事務局 2012, p. 6)
  4. ^ (CUD事務局 2012, p. 7)
  5. ^ (CUD事務局 2012, p. 7)
  6. ^ (CUD事務局 2012, p. 7)
  7. ^ (CUD事務局 2012, p. 7)
  8. ^ (CUD事務局 2012, p. 7)
  9. ^ (CUD事務局 2012, pp. 36～37)
  10. ^ (CUD事務局 2012, pp. 36～37)

参考文献

編集
  • 教育出版 CUD事務局、2012、『カラーユニバーサルデザインの手引き』、教育出版 ISBN 978-4-316-80373-9

関連項目

編集

外部リンク

編集
"https://ja.wikibooks.org/w/index.php?title=ウェブユニバーサルデザイン/CUD&oldid=165525" より作成