色覚異常シミュレータ
色覚異常 (CVD)、protanopia、deuteranopia、tritanopia を含むさまざまなタイプの色覚異常がある人にどのように色が見えるかをシミュレートします。
Input Color
Color Vision Deficiency Simulation
Normal Vision
Full trichromatic color vision
#3b82f6
Protanopia
Absent red (L) cones — ~1% of males
#5f85fc
Deuteranopia
Absent green (M) cones — ~1% of males
#4d74f3
Tritanopia
Absent blue (S) cones — very rare
#1499a5
Protanomaly
Weakened red (L) cones — ~1% of males
#5282f9
Deuteranomaly
Weakened green (M) cones — ~5% of males
#497cf5
Tritanomaly
Weakened blue (S) cones — rare
#3786c5
Achromatopsia
Total color blindness — monochromacy
#7b7b7b
Color Pair Contrast Checker
See how the contrast between two colors holds up across all CVD types.
| Type | Color 1 | Color 2 | Ratio | AA |
|---|---|---|---|---|
| Normal Vision | #3b82f6 | #ffffff | 3.68:1 | Fail |
| Protanopia | #5f85fc | #ffffff | 3.36:1 | Fail |
| Deuteranopia | #4d74f3 | #ffffff | 4.11:1 | Fail |
| Tritanopia | #1499a5 | #ffffff | 3.43:1 | Fail |
| Protanomaly | #5282f9 | #ffffff | 3.55:1 | Fail |
| Deuteranomaly | #497cf5 | #ffffff | 3.83:1 | Fail |
| Tritanomaly | #3786c5 | #fcffff | 3.88:1 | Fail |
| Achromatopsia | #7b7b7b | #ffffff | 4.23:1 | Fail |
AA = WCAG 2.1 Level AA normal text (4.5:1 minimum). Both colors are independently simulated for each CVD type before the ratio is calculated.
色覚異常シミュレータの使い方
- 1カラー ピッカーまたは 16 進数入力を使用して色を入力します。
- 2シミュレートする色覚異常タイプを選択します。
- 3元の色とシミュレートされた色を並べて比較します。
- 4アクセシビリティ準拠のコントラスト比を確認します。
Zenovayアナリティクス
関連ツール
よくある質問
色覚異常とは何ですか?▾
色覚異常は特定の色を区別する能力の低下であり、通常は網膜の円錐細胞光受容体の欠失または機能不全が原因です。
色覚異常の主なタイプは何ですか?▾
最も一般的なタイプは protanopia (赤錐体欠失)、deuteranopia (緑錐体欠失)、tritanopia (青錐体欠失) です。異常形は完全な欠失ではなく感度のシフトがあります。
色覚異常の影響を受ける人は何人ですか?▾
北ヨーロッパ系の男性の約 8%、女性の約 0.5% が何らかの色覚異常を持っています。赤緑色覚異常が最も一般的です。
色覚異常のユーザー向けにどのようにデザインすべきですか?▾
色を情報を伝える唯一の手段として使用することを避けます。色をアイコン、パターン、またはラベルとペアにします。高コントラスト ペアを使用し、シミュレーション ツールでテストします。
WCAG ガイドラインは色について何と言っていますか?▾
WCAG 1.4.1 は色が情報を伝える唯一の手段ではないことを要求します。WCAG 1.4.3 および 1.4.6 は最小コントラスト比 4.5:1 (AA) および 7:1 (AAA) を要求します。