色覚多様性(色覚異常)の見え方を Chrome DevTools でシミュレーションする
去年にアップデートされた Chorome 83 以降、拡張やアプリなどを導入することなく、DevTools で簡単にシミュレートすることが可能になっています。
手順
DevTools のメニューを開きます。
More tools から Rendering を選択します。
あとは Emulate vision deficiencies で選択するだけです。
シミュレーションできる種類
実際に DevelopersIO のロゴがどう見えるのか、それぞれの選択肢でどうみえるようになるのか確認してみました。
| 選択肢名 | サンプル画像 |
|---|---|
| No emulate |  |
| Blurred Vision |  |
| Protanopia |  |
| Deuteranopia |  |
| Tritanopia |  |
| Achromatopsia |  |
まとめ
DevTools で簡単に確認ができるため、色が重要になってくるシーンではしっかりと確認して作れるので嬉しい機能です。Rendering パネルではダークモードなど他にも色々とエミュレーションができるので便利なのですが、普段あまり DevTools を使わないような方ですと知られていない機能かなと思ったので紹介させていただきました。
