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

WebDesign

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

色覚の違いによる色の見え方の違いの例
一般色覚者 P型(1型)色覚者

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

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

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

Photoshopのメニュー

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

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

Google chromeの拡張機能 「NoCoffee」のメニュー画面

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

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

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

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

ベースカラー

色名 カラーコード
明るいピンク #ffcabf
クリーム #ffff80
明るい黄緑 #d8f255
明るい空色 #bfe4ff
ベージュ #ffca80
明るい緑 #77d9a8
明るい紫 #c9ace6

アクセントカラー

色名 カラーコード
#ff4b00
黄色 #fff100
#03af7a
#005aff
空色 #4dc4ff
ピンク #ff8082
オレンジ #f6aa00
#990099
茶色 #804000

無彩色

色名 カラーコード
#ffffff
明るいグレー #c8c8cb
グレー #84919e
#000000

カラーユニバーサルデザイン推奨配色セットガイドブックでは、画面用の見分けやすい色の組み合わせ例やデザインのポイントなども紹介されていますので参考にしてみてください。

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください