Google UI Color を色覚障がい者にも優しく選べるツール「GUCUD Palette」を作りました

先日書いた「GoogleのUI Color Palette を色覚障がいの視点から見てみた」の最後の方で言っていたツールを、結局自分で作ってみました。
出来上がったのが「GUCUD Palette」です。
GUCUD Paletteの仕組みや使い方などについてまとめました。

「GUCUD Palette」の使い方

gucud-palette_ss1
使い方はカンタンです。
パレット上で使いたいカラーをクリックすると、設定した色差や明度差より低いカラーが半透明になります。
半透明になっていないカラーは色覚障がいのある方でも比較的見やすい色なので、ぜひ配色の際に参考にして頂きたいです。

また、色差は300〜600まで50単位、明度差は25〜250まで25単位で設定出来ます。
各設定のプルダウンから選択してください。
初期値は、色差300/明度差125です。

右上の「正常な色覚」といったタブを切り替えると、それぞれの色覚でみた際のカラーパレットに変わります。
カラーを選択した状態でも切り替えられるので、どんな風に見えているのか?というチェックに使って頂きたいです。

ただ、このツールでは色差と明度差の判定しかしていません。
輝度比については判定していないので、その辺りは注意してください。

仕組みについて

使える色の判定は、選択した色とカラーパレットの色差と明度差を計算し、各設定された数値以下の場合は薄くなるようにしています。
色差と明度差の計算方法は以下のサイトを参考にしました。

色の組み合わせチェック – 読みやすい前景色と背景色

また、各色覚での色の表示ですが、先日書いた「GoogleのUI Color Palette を色覚障がいの視点から見てみた」で紹介した、UDingでGoogle UI Colorをみた際の画像から、各色を地道に(フォトショのスポイトで)取り出してカラーライブラリを作成し、それをベースに制作しています。

(前述のリンク先で、使えそうなライブラリへのリンクがあったんですが、古いせいか、残念ながら女性の微笑む画像のページでした。なので地道に作りました…)

設定値について

W3Cで推奨されていた明度差が125以上、色差は500以上とあったので設定値を固定しようと思ったんですが、
gucud-palette_ss2
あれ?殆ど選べない/(^o^)\

前述のリンクにある通り、色差だけでは人によってばらつきがあるようなので、色差を300〜600の範囲で選択できるようにしました。
また、色差よりも明度差の高さを重視した方がよさそうだったので、明度差も選択できるようにしました。

そもそもの基準が古かった件

これを作った後に色々と調べていたところ、現在の基準では色差、明度差よりもコントラスト比(しかも文字サイズ等も関係する)を重視するようです。
その計算式などもみつけたんですが、» JIS X8341-3:2010における文字コントラストの達成基準 | 坂本邦夫の「基礎からわかるホームページの配色」に書かれている通りで、私の頭ではイマイチ理解が出来ませんでした_(:3 」∠ )_

もう少し勉強して、輝度比も設定出来るようになったら…またお知らせします。はい。

色覚をちょっと意識するためのツールに

色覚障がい者に配慮したWebサイトの作り方 | Webクリエイターボックスでも紹介されていますが、PhotoshopのCS4以降なら、表示 > 校正設定 に「P型色覚」「D型色覚」の表示モードがあるようです。

ちょっと気になるなーという時に使ってみるといいかもしれません。

CUDを気にしたら使える色が無いのでは?

CUDに気を取られすぎると、使える色が無くなったり、デザインがし辛くなるかもしれません。

しかし、そこもひと工夫で乗り越えられると思います。
前述のWebクリエイターボックスの記事の最後のほうにもあるように、似たような色が並んでいても、ちょっと模様を加えて差別化してあげるとか、色と合わせてテキストを添えるとか、そういうひと工夫でいいと思うんです。
「ちょっとだけ意識してみる」というのが、ポイントじゃないかなーと。

そういう、ちょっとだけ意識してみたい人のお手伝いができれば幸いです。
よかったら、使ってみてくださいね。

GUCUD Palette

参考サイト)
色の組み合わせチェック – 読みやすい前景色と背景色
» JIS X8341-3:2010における文字コントラストの達成基準 | 坂本邦夫の「基礎からわかるホームページの配色」
» 視認性・可読性の確保 | 坂本邦夫の「基礎からわかるホームページの配色」
【続報】担当者に聞いた:なぜ、富士通は「色覚障がい者のための診断ソフトウェア無償提供」を終了したのか – @IT
色覚障がい者に配慮したWebサイトの作り方 | Webクリエイターボックス
ツールの紹介 — NPO法人カラーユニバーサルデザイン機構/色弱・色盲相談窓口/特定非営利活動法人 Color Universal Design Organization

UPDATE : 2017/11/12 / Tags

関連記事

新着記事

コメントを残す