category icon
2022-06-23
HTML

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

chrome
102.0.5005.115
profile
hikaru
Software Developer / DIY'er

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 色覚異常:灰色の色合いを除いて、どの色も知覚できない。