読者です 読者をやめる 読者になる 読者になる

MasaoApril's Library.

Software Testingなネタを書いてみた。

簡易的にGUI画面の色の見え方を確認する方法

color vision Usability UI

 組み込み機器開発であっても、Webブラウザやアプリケーションソフトでネットワークなどの設定を行うことが増えています。テスターが機能テストでバグを発見するだけでなく、非機能テストで使用性について妥当か否かを確認することも求められています。開発しているシステムがどのように利用されるかを考えたとき、Webブラウザやアプリケーションソフトで設定画面の見え方、特に色がどのように感じられるのか、確認する場面があります。今回は、簡易的ですが実践した内容をまとめます。

色覚とは?

 外界には可視光線があり、波長が400~800nmの光のうち色を感じる3種類の錐体細胞(赤色に反応:L錐体、緑色に反応:M錐体、青色に反応:S錐体)があります。例えば、虹を見たときに赤色/橙色/黄色/緑色/水色/青色/紫色の7色を知覚します。

色覚異常とは?

 特定の色が区別できないこと。主に3種類あります。

  • Protanope(1型2色覚)
    L錐体が異常:赤色と緑色は、茶色の濃淡として知覚する。
  • Deuteranope(2型2色覚)
    M錐体が異常:赤色と緑色は、濃淡が認識できない茶色として知覚する。
  • Tritanope(3型2色覚)
    S錐体が異常:黄色と赤色が赤色として知覚し、緑色と青色が青色として知覚する。

色覚異常をシミュレーションする方法

 Stanford UniversityDr. DoughertyDr. Wadeが開発したVischeckThe National Institutes of Health(NIH)の元職員 Wayne Rasbandが開発したImageJ(Image Processing Analysis in Java)を利用します。

  1. http://www.vischeck.com/downloads/からVischeckJ1.0をダウンロードします。
  2. ImageJダウンロードページからImageJ本体をダウンロードします。
  3. ImageJ本体をインストールします。(Windows版は、ダウンロードしたzip形式のファイルを任意のドライブに解凍する。)
  4. ダウンロードしたVischeckJ1.0のzipファイルを展開し、展開後に生成されたVischeckJ1のディレクトリを丸ごとImageJ本体のインストール先にあるpluginsのディレクトリにコピーします。
  5. 色覚異常をシミュレーションしたいアプリケーションを立ち上げ、確認したい画面のスクリーンショットを撮ります。
    Original Application
  6. ImageJを起動し、ImageJのEditメニューからPasteを選択し(もしくはCtrl+V)、スクリーンショットを撮った画像を貼ります。
  7. ImageJのPluginsメニューから"Vischeck Panel"を選択し、Vischeckのウィンドウを表示します。
    Vischeck Panel
  8. "Protanope"/"Deuteranope"/"Tritanope"のボタンを押下すると、それぞれ「1型2色覚」「2型2色覚」「3型2色覚」をシミュレーションした画像が表示されます。
    • 1型2色覚
      Protanope(1型2色覚)
    • 2型2色覚
      Deuteranope(2型2色覚)
    • 3型2色覚
      Tritanope(3型2色覚)

所感

 開発中のアプリケーションソフトで実施しましたが、数色で構成されているシンプルな画面でしたので、色の区別が困難なものはありませんでした。
 今後は、様々な特性を持った方々が利用しやすいシステムとは何か、あるべき姿について様々な関係者と議論し、製品開発に寄与しようと思います。