作ったもの
Colorblind Sim — https://sen.ltd/portfolio/colorblind-sim/
- 8 種類のシミュレーション（正常 / 1型色覚 / 2型色覚 / 3型色覚 / 全色盲 + それぞれの弱型）
- 画像のドラッグ & ドロップ、並列表示
- WCAG コントラスト比チェッカー（AA / AAA）
- Hex カラーピッカー
vanilla JS、ゼロ依存、ビルド不要。node --test で 69 ケース。
線形 RGB 空間での 3×3 行列変換
シミュレーション行列は線形 RGB 空間で定義されている。sRGB（ガンマ補正済み）のまま適用すると目に見えて間違った結果になる:
function sRGBToLinear(v) {
const c = v / 255;
return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}
公式の sRGB 伝達関数。ガンマ 2.2 に近いが黒付近に線形区間がある。
行列の出所
Machado, Oliveira, Fernandes (2009) の論文ベース。1型色覚（L-cone 欠損）:
0.567 0.433 0.000
0.558 0.442 0.000
0.000 0.242 0.758
弱型（〜anomaly）は恒等行列との間を補間して作る。完全欠損と正常の中間。
WCAG コントラスト
const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
輝度係数 0.2126 / 0.7152 / 0.0722 は人間の眼の緑への感度の高さを反映。+0.05 は黒でゼロ除算を防ぐため。
- AA 通常テキスト: ≥ 4.5:1
- AAA 通常テキスト: ≥ 7:1
なぜ必要か
「赤はエラー」という UX 慣習は 12 人に 1 人の男性には通用しない。色 + アイコン + テキストの冗長化が正解。シミュレータは「自分の目」で確認できるので、仕様書を読むより説得力がある。
シリーズ
100+ 公開ポートフォリオ シリーズの #68 です。