モード
1型2色覚（Protanopia）
効果
赤系の色が暗くなり、識別しにくい色調へ変化
デザインツール
色覚多様性シミュレーター - Matrix Filter プレビュー
色覚特性を再現する matrix をサンプル画面に適用し、protanopia、deuteranopia、tritanopia、achromatopsia で UI の色がどう見えるかを確認できます。リリース前にコントラストやステータス色の問題を洗い出すのに役立ちます。
DesignUXAccessibility
クイック切替:CSS Filter ジェネレーター
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
色覚多様性シミュレーター
Normal Vision Full spectrum capability.
Current Filter Rule
Normal · palette利用シーン
- 赤緑系のステータス色が見分けられるか確認する
- チャートやバッジを一般的な CVD 条件で検証する
- デザインガイドライン監査時に filter mode を共有する
使い方
- プレビューサンプルと simulation mode を選ぶ
- 通常表示との違いを比較する
- filter snippet をコピーする
入出力サンプル
FAQ
シミュレーションの精度はどの程度ですか？
公開されている CVD 変換 matrix を用いた近似です。実際の見え方は個人差やディスプレイ条件によって変わります。
CSS filter を使っていますか？
プレビューは色行列ベースの filter で再現しており、単純な hue rotate ではありません。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
CSS Filter ジェネレーター
CSS Filter ジェネレーター - ライブ画像エフェクト
blur、grayscale、contrast などの CSS filter 関数をライブプレビュー付きで組み合わせられます。スライダー操作だけで filter: blur(2px) grayscale(100%); のような stack を作成し、そのままコピーできます。
Design CSS Filter