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

chrome のデベロッパーブログ によると、Chrome v83 から内蔵の DevTools にて色覚異常のシミュレーションができるようになったようです。

この記事では色覚異常のシミュレーション操作方法を記載します。

手順

(1) Chrome の デベロッパーツールを開く

Chrome 内の「･･･」⇒「その他ツール」⇒「デベロッパーツール」から開けます。

(2) デベロッパーツールから Rendering 項目を表示する

デベロッパーツール内の「･･･」⇒「More Tools」⇒「Rendering」から表示できます。

(3) Emulate vision deficiencies からシミュレーション設定を行う

Rendering 内の 「Emulate vision deficiencies」からシミュレーションを選択できます。

シミュレーションの種類

選択肢	サンプル	内容
① No emulation		シミュレーションなしの通常状態
② Blurred vision		霧視、かすみ目
③ Protanopia		1型2色覚。赤色光を知覚できない。
④ Deuteranopia		先天赤緑異常：緑色の光を知覚できない。
⑤ Tritanopia		三型色覚：青色光を知覚できない。
⑥ Achromatopsia		色覚異常：灰色の色合いを除いて、どの色も知覚できない。