WCAGカラーコントラスト比＆色覚シミュレーター
説明
データ更新日: 2026年7月12日
色を選択する
文字色 (Foreground)
50%
HEXカラーコードを入力
明度（Lightness）調整
背景色 (Background)
100%
HEXカラーコードを入力
明度（Lightness）調整
定番の組み合わせ:
アクセシビリティ判定（WCAG 2.1 適合基準）
コントラスト比
4.50:1
/ 21:1
通常テキスト (< 18px / 14pt)
AA:
PASS
AAA:
PASS
大きなテキスト (≥ 18px Bold / 24px)
AA:
PASS
AAA:
PASS
UI部品・グラフィックス
AA基準:
PASS
1画面色覚シミュレーション (同時ビューア)
※各色覚多様性のフィルターをHTMLプレビュー枠に直接適用しています。
通常の色覚
一般色覚
大多数の人が見ている、全ての色彩が判別可能な状態です。
通常文字 (14px)
文字の読みやすさを確認してください。コントラストが低いと、目が疲れる原因になります。
大きな文字 (20px Bold)
見出しテキスト
UIコンポーネント
タグ枠
P型 (1型2色覚)
赤が見えにくい
赤い光を感知しにくく、赤と緑、または紫と青の識別が難しくなります。
通常文字 (14px)
文字の読みやすさを確認してください。コントラストが低いと、目が疲れる原因になります。
大きな文字 (20px Bold)
見出しテキスト
UIコンポーネント
タグ枠
D型 (2型2色覚)
緑が見えにくい
緑の光を感知しにくく、P型と同様に赤と緑の識別が難しくなります。
通常文字 (14px)
文字の読みやすさを確認してください。コントラストが低いと、目が疲れる原因になります。
大きな文字 (20px Bold)
見出しテキスト
UIコンポーネント
タグ枠
T型 (3型2色覚)
青が見えにくい
青い光を感知しにくく、青と黄、または紫と赤の識別が難しくなります。
通常文字 (14px)
文字の読みやすさを確認してください。コントラストが低いと、目が疲れる原因になります。
大きな文字 (20px Bold)
見出しテキスト
UIコンポーネント
タグ枠
A型 (全色盲)
明暗のみ
色彩を感知できず、明暗（モノクローム）のみで物事を識別します。
通常文字 (14px)
文字の読みやすさを確認してください。コントラストが低いと、目が疲れる原因になります。
大きな文字 (20px Bold)
見出しテキスト
UIコンポーネント
タグ枠