ColorScope.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

インターネットの裾野が広がるのに合わせてWebページのアクセシビリティは大事な要件になってきました。今回は色覚異常を再現するブックマークレットColorScope.jsを紹介します。

[](http://images.moongift.jp/2013/08/Screenshot 2013-08-13 20.05.18.1376398123.png)
ブックマークレットを実行すると、様々な色覚異常の条件が表示されます。

[](http://images.moongift.jp/2013/08/Screenshot 2013-08-13 20.05.32.1376398133.png)
一つ実行しました。暖色系の色がぐっと弱まったのが分かるかと思います。

[](http://images.moongift.jp/2013/08/Screenshot 2013-08-13 20.05.44.1376398143.png)
また別なブックマークレット。背景色が変わりました。

[](http://images.moongift.jp/2013/08/Screenshot 2013-08-13 20.05.52.1376398153.png)
こちらは全体的に色味がなくなり、茶系になっています。

[](http://images.moongift.jp/2013/08/Screenshot 2013-08-13 20.06.07.1376398165.png)
さらに別なものはグレー系の色合いになっています。

ColorScope.jsを使うとテキストはもちろんのこと、画像も色が変わっています。これはCanvasを使って画像を変換しているとのことです。ただし外部ドメインの画像に対しては適用されないとのことなのでご注意ください。この状態でも可読性が高い状態であるか、チェックしてみましょう。

MOONGIFTはこう見る

格好いいデザインを考えるとつい細かい部分にまで手を入れてしまったり、小さなスペースに情報を埋め込もうとしてしまいがちです。しかし年齢層の高い人たちや色覚異常がある場合、そうしたコンテンツはとてもアクセスしづらいものになります。

どのような層に対しても適切にコンテンツが配信できるように考えるのもまたデザイナーの役目と言えます。そのためには思い切って情報を切り捨てたり、ボタンをなくしてしまうといった考え方も必要になるでしょう。

jaz303/ColorScope.js