Figmaでデザインしながら色覚特性をシミュレーションする

以下の記事からの応用で表示できたのでメモ。

Chrome 開発者ツールの色覚特性シミュレーション機能 | Accessible & Usable

accessible-usable.net

開発者ツールを開いて、「Emulate vision deficiencies」から表示を切り替えることができる。ChromeとFigmaデスクトップアプリで利用できる（2024年5月時点）

1. [⌘ command]＋[option]＋[I] キーをクリックして、開発者ツールを開く

2. 開発者ツールの [︙ Customize and control DevTools] をクリック

3. [More tools] から [Rendering] をクリック

4. [Emulate vision deficiencies] から表示を選択

• Blurred vision – ぼやけ

• Reduced contrast – 低コントラスト

• Protanopia – P型 : 赤の視感度がない

• Deuteranopia – D型 : 緑の視感度がない

• Tritanopia – T型 : 青の視感度がない

• Achromatopsia – A型 : 色の識別ができず明暗でしか判別できない

表示している開発者ツールが邪魔であれば、再度 [⌘ command]＋[option]＋[I] キーをクリックすると非表示できる。

Figmaデフォルトで機能としてあれば良いと思った（見つけられていないだけで、すでにあるのかな？）