Aug 27, 2010
[Misc] システムの色覚異常への対応について
色覚異常対応について調べたのでメモ。
色覚異常
色覚異常には先天色覚異常と後天色覚異常がある。
先天色覚異常
先天赤緑色覚異常は先天色覚異常の中で最も多く存在し、赤系統や緑系統の色の弁別に困難が生じる人が多いといわれる。 日本人では男性の4.50%、女性の0.165%が先天赤緑色覚異常で、日本全体では約290万人が存在する。 白人男性では約8%が先天赤緑色覚異常であるとされる。
(Wikipedia - 色覚異常)
2型色覚(2型2色覚と2型3色覚)の人が間違えやすい組み合わせは、赤と緑、オレンジと黄緑(きみどり)、緑と茶、青と紫、ピンクと(しろ)・灰色、緑と灰色・黒です。 1型色覚(1型2色覚と1型3色覚)の場合これに、赤と黒、ピンクと青が加わります。
(目と健康シリーズ - 色覚の異常)
後天色覚異常
後天色盲は遺伝的背景に関わらず、誰にでも発症する可能性があるものが多いのが特徴と言える。 その原因は、角膜、水晶体、硝子体といった中間透光体の着色によるもの、網膜病変によるもの、緑内障によるもの、視神経病変によるもの、大脳性病変によるもの、心因性要因によるものなど様々であるが、何よりもすべての人に関係する問題として、加齢に伴う色覚の変化がある。
後天色盲でもっとも多い、後天青黄色盲の色感覚をまとめると次のようになる。
- 青の範囲が広く、健康な眼の 青紫〜青〜青緑〜緑〜黄緑 までを青として知覚し、緑の感覚を失う。
- 黄色は彩度が低下して白っぽく見える。
- 低明度、低彩度の色は、ほとんど青または無彩色に見える。
- 「黄色」→「白」、「緑」→「青または黒」、「茶」→「紫または黒」、「紫」→「青、茶、黒」、「青」→「黒」などの色誤認をする。
(色覚の多様性と視覚バリアフリーなプレゼンテーション - 色覚が変化すると、どのように色が見えるのか?)
Web サイトにおける色覚異常対応のガイドライン
w3c が策定している Web Content Accessibility Guidelines (WCAG) 2.0 に色覚異常対応に関する記載がある。ここでは Level A/AA/AAA の 3 レベルが定義されており、想定するユーザが必要とするレベルの対応を行う。
1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)
- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
各レベルの詳細な情報は下記を参照。
- Understanding Guideline 1.4
- http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast.html
- Understanding Success Criterion 1.4.1 [Use of Color]
- http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
- Understanding Success Criterion 1.4.3 [Contrast (Minimum)]
- http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
- Understanding Success Criterion 1.4.6 [Contrast (Enhanced)]
- http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html
- WCAG 2.0 - contrast ratio
- http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
- WCAG 2.0 - relative luminance
- http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
- The Web KANZAKI - 色の組み合わせをチェックしてみる
- http://www.kanzaki.com/docs/html/color-check
- ImageJ
- http://rsb.info.nih.gov/ij/
- Vischeck
- http://www.vischeck.com/
- ImageJ をダウンロード、解凍する。解凍先を $IMAGEJ_HOME とする。
- VischeckJ をダウンロード、解凍する。解凍先を $VISCHECKJ_HOME とする。
- $VISCHECKJ_HOME/*.class を $IMAGEJ_HOME/plugins/VischeckJ/ にコピーする。
- シミュレートしたい画面をキャプチャし、画像として保存する。
- ImageJ を起動し、画像を開く。
-
Plugins > VischeckJ > &Vischeck Panel を選択。
-
Deuteranope(緑色覚異常)、Protanope(赤色覚異常)、Tritanope(青黄色覚異常) ボタンをクリックする。
WCAG 2.0 準拠の評価
WCAG 2.0 の各レベルではコントラスト比が規定されているので、システムがそのコントラスト比を満たすことを確認する。 コントラスト比の算出方法は以下を参照。
色覚異常をシミュレートする
ImageJ と VischeckJ を使用することで色覚異常をシミュレートすることができる。
ImageJ と VischeckJ のインストール
シミュレーションの実施
![]() オリジナル |
![]() 緑色覚異常 |
![]() 赤色覚異常 |
![]() 青黄色覚異常 |