css原生filter函数无法准确模拟色盲，因其作用于非线性srgb空间，而色盲需在生理lms锥细胞响应层面建模；必须用svg fecolormatrix实现线性空间变换。
不能用 invert() 或 grayscale() 直接模拟色盲效果——它们只是通用变换，不对应任何生理视觉模型。 真实的色盲模拟必须基于线性颜色空间变换（如 CIE XYZ → LMS），再对特定锥细胞响应做降维或归零处理，最终通过 filter: url(#svg-filter) 引用自定义 SVG 滤镜实现。
为什么 CSS 原生 filter 函数无法准确模拟色盲
CSS 标准滤镜函数（如 brightness()、contrast()、hue-rotate()）作用于 sRGB 像素值，属于非线性、设备相关空间；而色觉缺陷发生在人眼 L/M/S 锥细胞响应层面，需在生理感知空间（LMS）中建模。直接调 sepia(100%) 或 grayscale(100%) 只会让所有人看灰图，不是色盲者看到的“红绿难分”。
-
hue-rotate(90deg)是全局色相偏移，不区分通道权重，无法复现红绿色盲（deuteranopia）中 M 锥细胞响应缺失的特征 -
saturate(0%)抹掉所有色度信息，但红绿色盲者仍能分辨黄/蓝、紫/绿等组合，只是混淆红/绿/棕/灰 - 浏览器不支持
filter: color-matrix(...)这类低阶控制，必须借助 SVG<fecolormatrix></fecolormatrix>
用 SVG <fecolormatrix></fecolormatrix> 实现 deuteranopia（红绿色盲）模拟
核心是将 RGB 输入映射到 LMS 空间，设 M 通道为 0，再转回 RGB。常用矩阵来自 Brettel 等人 1997 年论文，已适配 sRGB：
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><defs><filter id="deuteranopia"><fecolormatrix type="matrix" values="
0.3307 0.6693 0.0000 0 0
0.3307 0.6693 0.0000 0 0
0.0000 0.0000 1.0000 0 0
0 0 0 1 0
"></fecolormatrix></filter></defs></svg>
把这个 SVG 放在 HTML 文档顶部（或作为外部文件引入），然后在目标元素上写：
img { filter: url(#deuteranopia); }
- 该矩阵把 R/G 通道按固定比例混合后填入前两行，实质是让 M 锥细胞响应失效，保留 S 通道（蓝）不变
- 注意：必须确保 SVG 在 DOM 中已加载，否则
url(#...)会静默失败，无报错 - 不要加
!important覆盖其他 filter —— SVG 滤镜会完全替代原filter值，不叠加
protanopia（红色盲）与 tritanopia（蓝色盲）的矩阵差异
三类常见色觉缺陷对应不同矩阵，关键区别在被抑制的通道和补偿方式：
-
protanopia：L 锥细胞缺失 → 第一行全零，第二行强化 G，第三行保留 B（但需重平衡）
典型值："0 0 0 0 0 0.4942 0.7517 -0.2459 0 0 0.1768 -0.0465 0.8697 0 0" -
tritanopia：S 锥细胞缺失 → 前两行保留 R/G，第三行设为 R+G 混合（因缺蓝时黄/紫易混淆）
典型值："1 0 0 0 0 0 1 0 0 0 0.1768 0.8232 0 0 0" - 所有矩阵都要求
type="matrix"，且 20 个数字必须严格空格分隔，多一个空格或换行会导致整个 filter 失效
实际使用时最容易忽略的兼容性与性能点
SVG 滤镜虽强大，但在移动端和旧版 Safari 上表现不稳定：
- iOS Safari 15.4+ 才完整支持
<fecolormatrix></fecolormatrix>的 type="matrix"，更早版本只认 "saturate" 等预设类型 - Chrome Android 对大型图像应用 SVG 滤镜时可能触发合成层爆炸，帧率骤降 —— 建议限制在
max-width: 400px的图标或小图上使用 - 没有 fallback 机制：若
url(#xxx)无效，元素就没有任何滤镜效果，不会退回到grayscale(50%) - 调试时打开 DevTools → Rendering → “Paint flashing” 可观察是否意外触发重绘；若整页变绿，说明 filter 正在高频重计算
真正可靠的色盲模拟只出现在专用工具（如 Chrome DevTools 的 Rendering 面板里的 “Emulate vision deficiencies”）中；自行实现仅适用于演示或辅助开发，不可用于可访问性合规声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
