ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

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


ブックマークレットを実行すると、様々な色覚異常の条件が表示されます。


一つ実行しました。暖色系の色がぐっと弱まったのが分かるかと思います。


また別なブックマークレット。背景色が変わりました。


こちらは全体的に色味がなくなり、茶系になっています。


さらに別なものはグレー系の色合いになっています。

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


MOONGIFTはこう見る

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

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

jaz303/ColorScope.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2