色覚シミュレーター

色や画像を各色覚タイプ(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