具体的なデザイン例 -(1/2) |
BACK NEXT |
|
この項では、GUIデザインにおいて色覚障害対策を行っていく際のヒントや凡例を集めてあります。
色覚障害対策を行うと手間やコストが余計にかかると思われがちですが、デザイナーや設計者が色覚障害の色傾向を理解していれば、ちょっとした色選択時の気配りで対応が可能です。
正常者と障害者に全く同等のデザインを提供することは現実的には無理ですが、工夫次第ではかなりのレベルまで差を無くすことも可能です。
ここに紹介しているヒントや凡例は第1色盲と第2色盲に対応したもので、第3色盲には非対応のものです。
赤と緑の組合せはとにかく避ける
第1色盲、第2色盲の両方に共通した色傾向である「赤と緑が認識しにくい」という事から、赤と緑のボタンをペアで使うことを避けるのは基本原則です。
シルク印刷等の余分なコストをかけられない場合は、緑ボタンでは無く青色ボタンを使いましょう。「赤と青」の差異は明確に区別してもらえます。
解説と色覚シミュレーションを開く
|
エリア区分に色を使おう
色覚障害対応で「地図やグラフの区分を色だけでなく線 を使って示した」ものを目にしますが、誰が見ても煩雑で見にくい場合が多いです。
「認識できる色を使えば問題ありません」色覚障害の色傾向を理解すれば色を使って塗り分けても大丈夫です。
解説と色覚シミュレーションを開く
|
赤を少しマゼンタに
文字に対して強調や機能表現のために修飾を付ける際、各種の制約により太字や反転などを使えない場合があります。「注意」「重要」など他から際立たせるために赤を使う時は、RGB:255.0.0ではなく少し青を加えたマゼンタ寄りの色を使うと色覚障害の方にも目立った印象を感じてもらえます。
解説と色覚シミュレーションを開く
|
グリーンは思ったより地味
OSD系GUIに多用されている緑(RGB:0.255.0)は目立ちにくくなります。特に黄色(RGB:255.255.0)との差を認識してもらいにくく、使用する場合は他の表示物との関係に十分注意を払う必要があります。
解説と色覚シミュレーションを開く
|
|
次の解説(画面サンプル) |
※この説明に使っている写真等のイメージは、Vischeck.comのVischeckPS - Macを使って、色覚障害状態を再現しています。
|
|