色覚シミュレーター
色や画像を各色覚タイプ(P型・D型・T型)でどのように見えるかシミュレーションします。 WCAG準拠のコントラスト比も計算できます。すべての処理はブラウザ内で完結します。
色の見え方比較
オリジナル(C型色覚)
サンプルテキスト Sample 123
前景 #2563EB
背景 #FFFFFF
P型(1型)色覚赤色弱 - 赤の感度が低下
サンプルテキスト Sample 123
前景 #0076f0
背景 #ffffff
D型(2型)色覚緑色弱 - 緑の感度が低下
サンプルテキスト Sample 123
前景 #0064e8
背景 #ffffff
T型(3型)色覚青色弱 - 青の感度が低下
サンプルテキスト Sample 123
前景 #00869d
背景 #ffffff
WCAGコントラスト比
オリジナル(C型色覚)5.17 : 1
PASS AA 通常PASS AA 大文字FAIL AAA 通常PASS AAA 大文字
P型(1型)色覚4.33 : 1
FAIL AA 通常PASS AA 大文字FAIL AAA 通常FAIL AAA 大文字
D型(2型)色覚5.27 : 1
PASS AA 通常PASS AA 大文字FAIL AAA 通常PASS AAA 大文字
T型(3型)色覚4.29 : 1
FAIL AA 通常PASS AA 大文字FAIL AAA 通常FAIL AAA 大文字
WCAG 2.1 基準: AA通常テキスト 4.5:1以上 / AA大文字テキスト 3:1以上 / AAA通常テキスト 7:1以上 / AAA大文字テキスト 4.5:1以上
前景色の見え方
オリジナル
#2563EB
P型
#0076f0
D型
#0064e8
T型
#00869d
背景色の見え方
オリジナル
#FFFFFF
P型
#ffffff
D型
#ffffff
T型
#ffffff