Color Blindness Simulator

關於本工具

色盲模擬器將CSS顏色矩陣濾鏡套用於範例顏色，讓您看到不同色覺障礙的人如何看到您的設計。

在設計依賴顏色傳達資訊的UI元件、圖表、地圖等視覺內容時使用此工具。

色盲類型

• 正常視覺: 正常視覺：完整色覺
• 紅色盲（第一色盲）: 紅色盲：缺乏紅色感光細胞（約1%男性）
• 綠色盲（第二色盲）: 綠色盲：缺乏綠色感光細胞（最常見，約1%男性）
• 藍色盲（第三色盲）: 藍色盲：缺乏藍色感光細胞（罕見，約0.003%）
• 全色盲（無色覺）: 全色盲：無色覺，只能看到灰階（極罕見）
• 色弱（色覺減退）: 色弱：多種錐細胞類型的色彩敏感度降低

使用方法

1. 從下拉選單選擇模擬類型。
2. 觀察選定濾鏡下顏色樣本和光譜如何變化。
3. 與正常視覺對比，找出有問題的顏色組合。

使用情境

UI/UX設計師檢查按鈕狀態和狀態指示器是否仍可區分。資料視覺化創作者確保圖表顏色具有無障礙性。遊戲開發者確認UI元素不僅依賴顏色。

常見問題

• 這些模擬有多準確？ — 使用已建立的顏色矩陣變換，是很好的近似值。可能無法完美複製個人感知，但給設計師提供可靠的問題指示。
• 有多少人患有色盲？ — 約8%的男性和0.5%的女性有某種形式的色覺缺陷。綠色弱是最常見類型。
• 針對色盲的最佳設計方式是什麼？ — 將顏色與形狀、圖案、標籤或紋理等視覺線索結合使用，並確保足夠的對比度。