色覚多様性(色覚異常)の見え方を Chrome DevTools でシミュレーションする

去年にアップデートされた Chorome 83 以降、拡張やアプリなどを導入することなく、DevTools で簡単にシミュレートすることが可能になっています。

手順

DevTools のメニューを開きます。

More tools から Rendering を選択します。

あとは Emulate vision deficiencies で選択するだけです。

シミュレーションできる種類

実際に DevelopersIO のロゴがどう見えるのか、それぞれの選択肢でどうみえるようになるのか確認してみました。

選択肢名	サンプル画像
No emulate
Blurred Vision
Protanopia
Deuteranopia
Tritanopia
Achromatopsia

まとめ

DevTools で簡単に確認ができるため、色が重要になってくるシーンではしっかりと確認して作れるので嬉しい機能です。Rendering パネルではダークモードなど他にも色々とエミュレーションができるので便利なのですが、普段あまり DevTools を使わないような方ですと知られていない機能かなと思ったので紹介させていただきました。