色覚異常とは正常な色覚の人と異なり、特定の色の認知度が低下している体質のことです。例えば色覚異常の傾向がある人は赤い色が見えにくかったり、緑や青が見えなかったりなど様々な症状が出ることがあります。

上のバーベキューの写真だと、正常な見え方だと焼けた肉と生肉の違いに気が付きますが、色覚異常があるとパッと見で差がわかりにくかったりします。その他にも色が見えない異常（モノクロになる）や色のコントラストが飛んでしまう異常など症状は様々です。

Webサイトや印刷物、ポスター等を制作する過程において、多くの人が見てわかりやすくなるよう色にも気を遣ってデザインしなくてはなりません。

Chromeで色覚異常の見え方チェックを行う

実はGoogle Chromeでは色覚異常の見え方を確認できます。まず対象のWebサイトを開き、Web開発者ツールを起動します。縦の三点メニューから[その他のツール]から[レンダリング]を選択します、

スクロールすると表示されれる[色覚異常をエミュレート]のプルダウンから様々な見え方をシミュレーションできます。

デフォルトの見え方（一般色覚）（C型）

かすみ目

低コントラスト

1型2色覚（赤色の識別不可）（P型）

2型2色覚（緑色の識別不可）（D型）

3型2色覚（青色の識別不可）（T型）

色覚異常（色の識別不可）

デザイン段階でチェックしよう

Webサイトを制作し終わってからデザインのアクセシビリティチェックを行うと、デザインまで巻き戻りかえって工数が増えてしまうことがあります。要件定義とデザインの段階でどこまでガイドラインを重視するのかはあらかじめ決めておきましょう。ユニバーサルデザイン（多目的・多様性デザイン）を促進するようなWebサイトでは以下の点に配慮しましょう。

• 色に囚われないデザインをする（色によって機能や目的を分けるのは控える）
• 色以外でデザインする（形やピクトグラム、アイコンで補助する）
• 背景色・文字色のコントラスト差を確保する（読みやすい色差を意識する）

おしまい♥

タグ：Webブラウザ