2020/03/25

カラーユニバーサルデザインに配慮した配色設計に役立つツール

Webサイトでは様々な色を利用して、色の区別による情報の伝達が行われています。
しかし世の中には、色の使い分けが適切でないと情報が正しく伝わりにくい色弱者といわれる人も多く存在します。
そこで、Webデザインにおいて、出来るだけ多くの人に見分けやすい配色を選ぶために利用できるツールを紹介します。

色覚の違いによる色の見え方の違いの例

一般色覚者	P型（１型）色覚者

色覚・色弱についての参考サイト：
NPO法人カラーユニバーサルデザイン機構(CUDO)|色覚・色弱よくある質問

Photoshopで異なる色覚の見え方をチェック

Photoshopには、開いた画像データの異なる色覚での見え方をチェックする機能があります。
Photoshopのメニューで「表示」から「校正設定」へ進むと、「P型（１型）色覚」「D型（２型）色覚」の項目があるので、それぞれの色覚を選択するとその色覚での見え方をチェックすることができます。

ブラウザで異なる色覚の見え方をチェック

Google chromeの拡張機能「NoCoffee」を利用することで、ブラウザで開いたページをいろいろな色覚の見え方でチェックすることができます。

拡張機能「NoCoffee」をchromeに追加すると、アドレスバーの右側に上図の赤い四角で囲った「NoCoffee」のアイコンが表示されます。
この「NoCoffee」のアイコンをクリックすると上図のメニューが開くので、その中の「Color deficiency」の項目の中からそれぞれの色覚
・P型(１型)色覚 (Protanopia)
・D型(２型)色覚 (Deuteranopia)
・T型(3型)色覚 (Tritanopia)
・A型色覚 (Achromatopsia)
を選ぶことでそれぞれの色覚の色の見え方をチェックすることができます。

「NoCoffee」はこちらのページで入手できます
chrome ウェブストア「NoCoffee」のページ

配色を決めるときの参考資料

カラーユニバーサルデザインに配慮して、情報をわかりやすく表示するための配色を決めるときに参考になる資料として、NPO法人カラーユニバーサルデザイン機構(CUDO)から発行されているカラーユニバーサルデザイン推奨配色セットガイドブックのカラーパレットを紹介します。
引用元：カラーユニバーサルデザイン推奨配色セット