// Color Vision Deficiency (CVD) Simulator // Uses SVG feColorMatrix filters applied to to simulate: // - Deuteranopia (綠色盲 ~6% 男性) // - Protanopia (紅色盲 ~1%) // - Tritanopia (藍色盲 <0.01%) // - Achromatopsia(全色盲 ~0.003%) // Values from Machado et al. 2009 / Brettel-Viénot-Mollon approximations. const CVD_MATRICES = { normal: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0", deuteranopia: "0.625 0.375 0 0 0 0.7 0.3 0 0 0 0 0.3 0.7 0 0 0 0 0 1 0", protanopia: "0.567 0.433 0 0 0 0.558 0.442 0 0 0 0 0.242 0.758 0 0 0 0 0 1 0", tritanopia: "0.95 0.05 0 0 0 0 0.433 0.567 0 0 0 0.475 0.525 0 0 0 0 0 1 0", achromatopsia: "0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0 0 0 1 0", }; const CVD_MODES = [ { k: "normal", l: "正常視覺", sub: "對照組", pop: "~92%" }, { k: "deuteranopia", l: "綠色盲 (Deuteranopia)", sub: "最常見", pop: "~6%" }, { k: "protanopia", l: "紅色盲 (Protanopia)", sub: "紅綠混淆", pop: "~1%" }, { k: "tritanopia", l: "藍色盲 (Tritanopia)", sub: "藍黃混淆", pop: "<0.01%" }, { k: "achromatopsia", l: "全色盲 (Achromatopsia)",sub: "只看見灰階", pop: "~0.003%" }, ]; const CVDFilterDefs = () => ( ); const CVDSimulator = () => { const [open, setOpen] = React.useState(false); const [mode, setMode] = React.useState("normal"); const [showTest, setShowTest] = React.useState(false); React.useEffect(() => { // Apply filter to #root, not body (so our own toolbar stays unaffected) const root = document.getElementById("root"); if (!root) return; root.style.filter = mode === "normal" ? "none" : `url(#cvd-${mode})`; return () => { root.style.filter = "none"; }; }, [mode]); return ( <> {/* Floating launcher — upper right, below topnav */} {open && (
色盲模擬檢測
設計師專用 · 非使用者選項
切換以下選項會對全站內容套用即時色彩模擬。用於檢查「是否只靠顏色傳達資訊」。
{CVD_MODES.map(m => ( ))} {showTest && }
)} {/* Mode badge banner at top when active */} {mode !== "normal" && (
◉ 正在模擬：{CVD_MODES.find(m => m.k === mode)?.l} · 此為設計檢測畫面
)} ); }; // Swatch panel: shows current design tokens as colorblind sees them const CVDTestSwatches = () => (
設計系統色票（檢視各狀態是否仍可區辨）
{[ { c: "#1a4789", l: "Brand" }, { c: "#e8743c", l: "Accent" }, { c: "#2d7a4f", l: "OK 綠" }, { c: "#b87d0b", l: "Warn 黃" }, { c: "#b42323", l: "Danger 紅" }, { c: "#0d6b88", l: "Caption 青" }, ].map(s => (
{s.l}
{s.c}
))}
✓ 每色皆搭配圖示與文字，不單獨依賴顏色
); Object.assign(window, { CVDSimulator, CVDFilterDefs });