2013年3月14日木曜日

色弱対応しました


entakunをリリースして、3ヶ月が過ぎました。

開発チーム(二人だけど)では、
そろそろ次のバージョンアップに向けて動き始めています。


この数ヶ月で、entakunを使って頂いている方から、いくつかご提案を頂いています。

その中で、一番衝撃だった問題。


それは・・・



色の違いが見えないんですけど。





「色」というのは、デジタル付箋の背景の色のことです。

entakunでは、付箋の分類を助ける狙いで、それぞれに色をつけることが出来ます。


今回使って頂いた方の中に、
色弱の方がいて「色の違いが見えない」と教えてくれたのでした。



配色は、私(hakama)が決めたのですが、正直、完全に忘れていて、
全く対応していませんでした。


これは是非とも対応したいので、次のバージョンアップに向けて調整を始めました。



調査開始



まず、色弱の方がどう見えているのか?

早速、フリーの色弱ソフトを落としてきてシミュレーションをしてみると・・・




げっ!


ほとんど黄かグレーに見える。





ちゃんと並べてみて見ると、問題が明らかに。

どうも色弱の人は、イエロー系かブルー系の二系統の色で世界が見えているようです。



上の色で特に酷いのは、鮮やかな緑。

完全に色味を失って、薄い黄色かグレーに見えてしまいます。

あらら。



色の調整開始



まず、第一弾の調整。

色弱ソフトの見え方を参考に、全体的に色を濃くしてみました。




まあ、この方向性で良さそう、と思ったものの、

リンクの青い文字と紫が重なると、リンクの文字が全く見えないという問題が発生。




めげずに、第二弾の調整。

リンクの色と背景の「色の濃さ」に差を出してみました。


加えて、背景が濃すぎると使いにくくなってしまうので、ちょっと薄めにもどしつつ、

以前のバージョンの色を活かしながら、微調整をしました。



並べてみて、もう一度確認。



(大丈夫だよね?)




未対応の色と比べると、格段に良くなったのではないかと思います。

今回の色弱対応で掴んだコツとしては、


 ・色弱の見え方で、イエロー系とブルー系に2つに分けて考える。

 ・上記の2つの色の濃さと鮮やかさで差を作る。(それぞれ3種類は作れそう)




最後に、お世話になったフリーソフトを紹介します。


 ColorAccess



プリントスクリーンのような要領で使える、シンプルな色弱確認ツールです。

第一色盲と第二色盲に対応。Win版のみ。


 ・作者:suginyさん

 ・http://www.vector.co.jp/soft/win95/net/se292407.html






今後も、開発中の色々な試行錯誤など、書いてゆきたいなと思っています。

お読みいただき、ありがとうございました。


0 件のコメント:

コメントを投稿