Web制作をするにあたり、ターゲット層はもちろんのこと様々な見え方を想定していかなければなりません。色盲・色弱もそのひとつです。色覚異常の方は日本に約290万人いるとされ、どんな人にも見やすく情報を伝えられるサイトにする必要があります。
今日はそんな色覚異常の方にどう見えているのかが確認できるChromeの拡張機能、「Colorblindly」を紹介します。

chrome.google.com

Colorblindly

https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg

Simulates colorblindness in your web browser.

拡張機能なので手軽に搭載できて、重くならない

アプリケーションというほど重くもなく、拡張機能という手軽さは非常に便利だと思いました。

確認したいページを開いた状態でモードを選択するだけ

「Blue Cone Monochromacy / Achromatomaly」で見た場合。色がくすんでいる

ちなみにこの機能、ブラウザ上に映るものなら全て対応できるので、XDなどのプロトタイプのブラウザ表示でも対応できます。（実際に試したところ適用できました）
これでウェブサイトだけではなく、アプリやスマホでバイスサービスに関しても確認ができるのでサービス開発やアプリ開発などにも応用できますね。

ちなみにこうした表示を変えるSketchプラグインもあります。

TECHNICAL CREATOR

色盲・色弱のシミュレーションやコントラストをチェックするSketchプラグイン「Sta...

https://technical-creator.com/stark

昨日に引き続きプラグインの紹介です。今日紹介するのはコレStarkThe color-blind simulator and contrast checker for Sketch. Design with accessibility in mind.（Sketch用カラーブラインドシミュレーター＆コントラストチェッカー。アクセシビリティを考慮したデザイン）まずはインストールインストールはSketchpacksやSketch Toolboxで行いましょう。Starkで検索してインストール。カラーブラインドシミュレーターStarkには8種類のカラーブラインドシミュレーターが用意されており、様々な症状の色盲・色弱の状態をシミュレーシ...

自分の使っているデザインツールに合わせたサービスを利用して、より細かなユーザーへの配慮ができるといいですね。

どんな人にも寄り添えるデザインを

自覚があったりなかったり見え方は人それぞれなので、問題ないと思ってても実は色弱だった、なんて人もいるかもしれません。ウェブサイトというのは誰でも平等にアクセスでき、平等に情報を得られる媒体です。それを作る私たちが様々なシチュエーションを想定して、ユーザーに寄り添える設計をしていきたいですね。

Colorblindyの追加はこちらのリンクから

chrome.google.com

Colorblindly

https://chrome.google.com/webstore/detail/colorblindly/floniaahmccleoclneebhhmnjgdfijgg

Simulates colorblindness in your web browser.

書き手： もりむし 未経験×独学からデザイナーになりたくてなった人。 フルスタック修行中。 Twitter： @moriom_d