先日書いた「GoogleのUI Color Palette を色覚障がいの視点から見てみた」の最後の方で言っていたツールを、結局自分で作ってみました。
出来上がったのが「GUCUD Palette」です。
GUCUD Paletteの仕組みや使い方などについてまとめました。
「GUCUD Palette」の使い方
使い方はカンタンです。
パレット上で使いたいカラーをクリックすると、設定した色差や明度差より低いカラーが半透明になります。
半透明になっていないカラーは色覚障がいのある方でも比較的見やすい色なので、ぜひ配色の際に参考にして頂きたいです。
また、色差は300〜600まで50単位、明度差は25〜250まで25単位で設定出来ます。
各設定のプルダウンから選択してください。
初期値は、色差300／明度差125です。
右上の「正常な色覚」といったタブを切り替えると、それぞれの色覚でみた際のカラーパレットに変わります。
カラーを選択した状態でも切り替えられるので、どんな風に見えているのか？というチェックに使って頂きたいです。
ただ、このツールでは色差と明度差の判定しかしていません。
輝度比については判定していないので、その辺りは注意してください。
仕組みについて
使える色の判定は、選択した色とカラーパレットの色差と明度差を計算し、各設定された数値以下の場合は薄くなるようにしています。
色差と明度差の計算方法は以下のサイトを参考にしました。
また、各色覚での色の表示ですが、先日書いた「GoogleのUI Color Palette を色覚障がいの視点から見てみた」で紹介した、UDingでGoogle UI Colorをみた際の画像から、各色を地道に（フォトショのスポイトで）取り出してカラーライブラリを作成し、それをベースに制作しています。
（前述のリンク先で、使えそうなライブラリへのリンクがあったんですが、古いせいか、残念ながら女性の微笑む画像のページでした。なので地道に作りました…）
設定値について
W3Cで推奨されていた明度差が125以上、色差は500以上とあったので設定値を固定しようと思ったんですが、
あれ？殆ど選べない／(^o^)＼
前述のリンクにある通り、色差だけでは人によってばらつきがあるようなので、色差を300〜600の範囲で選択できるようにしました。
また、色差よりも明度差の高さを重視した方がよさそうだったので、明度差も選択できるようにしました。
そもそもの基準が古かった件
これを作った後に色々と調べていたところ、現在の基準では色差、明度差よりもコントラスト比（しかも文字サイズ等も関係する）を重視するようです。
その計算式などもみつけたんですが、» JIS X8341-3:2010における文字コントラストの達成基準 | 坂本邦夫の「基礎からわかるホームページの配色」に書かれている通りで、私の頭ではイマイチ理解が出来ませんでした_(:3 ｣∠ )_
もう少し勉強して、輝度比も設定出来るようになったら…またお知らせします。はい。
色覚をちょっと意識するためのツールに
色覚障がい者に配慮したWebサイトの作り方 | Webクリエイターボックスでも紹介されていますが、PhotoshopのCS4以降なら、表示 > 校正設定 に「P型色覚」「D型色覚」の表示モードがあるようです。
ちょっと気になるなーという時に使ってみるといいかもしれません。
CUDを気にしたら使える色が無いのでは？
CUDに気を取られすぎると、使える色が無くなったり、デザインがし辛くなるかもしれません。
しかし、そこもひと工夫で乗り越えられると思います。
前述のWebクリエイターボックスの記事の最後のほうにもあるように、似たような色が並んでいても、ちょっと模様を加えて差別化してあげるとか、色と合わせてテキストを添えるとか、そういうひと工夫でいいと思うんです。
「ちょっとだけ意識してみる」というのが、ポイントじゃないかなーと。
そういう、ちょっとだけ意識してみたい人のお手伝いができれば幸いです。
よかったら、使ってみてくださいね。
参考サイト）
・色の組み合わせチェック – 読みやすい前景色と背景色
・» JIS X8341-3:2010における文字コントラストの達成基準 | 坂本邦夫の「基礎からわかるホームページの配色」
・» 視認性・可読性の確保 | 坂本邦夫の「基礎からわかるホームページの配色」
・【続報】担当者に聞いた：なぜ、富士通は「色覚障がい者のための診断ソフトウェア無償提供」を終了したのか – ＠IT
・色覚障がい者に配慮したWebサイトの作り方 | Webクリエイターボックス
・ツールの紹介 — NPO法人カラーユニバーサルデザイン機構／色弱・色盲相談窓口／特定非営利活動法人 Color Universal Design Organization
