色盲模擬器(8 種 + 正常)
用 Brettel / Machado 矩陣模擬 **8 種色盲**(全色盲 / 紅綠盲 / 藍黃盲,各分完全 / 部分)+ 正常,**色票或圖片** 同時並排顯示。設計師檢驗 dashboard / 圖表 / 標誌系統的無障礙必備。
正常視覺~92% of population
紅色盲(Protanopia)~1% males
紅色弱(Protanomaly)~1% males
綠色盲(Deuteranopia)~1% males
綠色弱(Deuteranomaly)~5% males (most common)
藍色盲(Tritanopia)<0.01% (very rare)
藍色弱(Tritanomaly)~0.01%
全色盲(Achromatopsia)1 in 30,000 (full)
部分全色盲(Achromatomaly)Rare
›如何使用
- 選 色票模式(顯示 12 色 swatches)或 圖片模式(上傳你的 dashboard / mock / chart)。
- 九個面板同時顯示:正常視覺 + 8 種色盲,每個面板標題附該類型的人口比例。
- 色票模式適合快速看品牌主色在色盲眼中變什麼樣;圖片模式適合檢查實際畫面(圖表、色階、icon、警告色)。
- 看到某幾種色盲下兩個原本不同的顏色變成相近 → 你的設計需要加 形狀 / icon / 文字標籤 來輔助,不能只靠顏色區分。
Tips
- 紅綠色盲(Protan + Deutan) 占男性 8% 左右,是最常見的,是無障礙第一優先檢驗對象。
- 藍黃色盲(Tritan) 極罕見(<0.01%)但仍要照顧 — 別讓黃藍對比成為唯一資訊。
- 用顏色 + 形狀 / 文字 是黃金法則(WCAG 1.4.1),例如錯誤訊息加 ⚠ icon 而不只是紅色。
- 圖表用 ColorBrewer / Viridis 等色盲友善 palette,避開純紅綠對比。
- 矩陣源自 Brettel & Viénot & Mollon (1997) 與 Machado et al. (2009),業界標準。
💡 全在瀏覽器內運算(canvas getImageData 像素操作),圖片不上傳。圖片超過 400px 會自動縮放以維持流暢度。