色盲模擬
檢視顏色與圖片在紅色盲、綠色盲、藍色盲等情況下的效果
- 檔案不會離開你的裝置
- 在瀏覽器本機執行
- 免費、免註冊、無浮水印
正常視覺
原始顏色
綠色弱
綠色視錐偏弱 · 約 5% 男性，最常見
綠色盲
缺少綠色視錐 · 約 1% 男性
紅色弱
紅色視錐偏弱 · 約 1% 男性
紅色盲
缺少紅色視錐 · 約 1% 男性
藍色弱
藍色視錐偏弱 · 罕見
藍色盲
缺少藍色視錐 · 非常罕見
全色盲
完全沒有色覺 · 非常罕見
7 組顏色變得難以區分
- #e53935 與 #43a047（綠色盲，ΔE 5.2）
- #43a047 與 #fb8c00（紅色盲，ΔE 6.4）
- #43a047 與 #1e88e5（藍色盲，ΔE 6.5）
- #e53935 與 #43a047（全色盲，ΔE 6.7）
- #e53935 與 #1e88e5（全色盲，ΔE 3.8）
- #43a047 與 #1e88e5（全色盲，ΔE 2.9）
- #43a047 與 #fb8c00（全色盲，ΔE 8.5）
原本可區分的兩個顏色在模擬中 ΔE2000 低於 10 時會被標示。可為這些顏色加上文字標籤、圖樣或拉開明度差。
如何使用色盲模擬
查看調色盤或圖片在 8 種色覺類型下的樣子，從最常見的綠色弱到全色盲。檢查調色盤時會列出所有變得難以分辨的顏色組合，方便你及早修正圖表與介面配色。
- 1
在「檢查對象」選擇「調色盤」或「圖片」。
- 2
調色盤：把顏色貼到「顏色」欄，每行一個或以逗號分隔，支援 HEX、rgb()、hsl()、oklch() 與顏色名稱；圖片：拖入 JPG、PNG、WebP、GIF、HEIC 或 AVIF 檔案。
- 3
調整「色弱程度」，控制色弱類型的模擬強度。
- 4
比較各列模擬結果或各張圖片；帶警告圖示的顏色組合會連同 ΔE 列在下方。
- 5
點擊色塊複製 HEX，或把任一張模擬圖下載為 PNG。
常見問題
模擬結果準確嗎？
紅綠色覺異常採用 Machado 等人 2009 年的模型，藍黃色覺異常採用 Brettel 等人 1997 年的模型，皆在線性 RGB 中計算。它們模擬的是典型情況，每個人的實際感受可能不同。
怎麼判斷兩個顏色難以分辨？
正常視覺下明顯不同的兩個顏色，在某種模擬下 ΔE2000 低於 10 時就會被標出。可以替這些顏色加上文字標示、圖樣，或拉開明度差。
「色弱程度」會影響什麼？
只作用於紅色弱、綠色弱、藍色弱這類色弱類型，代表相應視錐細胞偏移的程度，100% 等同於對應的色盲類型。
圖片會上傳嗎？
不會，模擬在瀏覽器中完成。預覽最多繪製到 900 像素，下載則依原圖解析度產生。
可以直接貼上 CSS 裡的顏色嗎？
可以。任何文字中的 HEX 與 CSS 顏色函式都會被辨識出來，顏色名稱以逗號或換行分開即可。無法辨識的內容會顯示為已略過。