色盲或色弱色彩感知模拟

今天是挑战的 第 50 天。欢迎关注我，查看前面的所有作品。

不知不觉，我们的 365 AI 开发挑战 已经走到了第 50 天！在这个特别的节点，我们不卷性能，不秀炫酷的特效，而是选择做一款充满“同理心”的硬核工具：全谱系色觉模拟器 (CVD Simulator)。

你是否好奇过，在色觉异常（俗称色盲或色弱）的人眼中，这个五彩斑斓的世界究竟是什么样子？秋天的红叶、交通信号灯、甚至是你的产品 UI，在他们看来可能与你的感知截然不同。

今天发布的这款基于纯前端构建的轻量级 Web 应用，将带你一秒“切换视角”，亲身体验不同色觉障碍人群的视觉世界。

🌟 核心亮点：不仅是模拟，更是科学

1. 基于 Machado (2009) 视觉模型

底层并没有使用简单的颜色替换，而是采用了 Machado 等人在 2009 年提出的生理学色彩视觉模拟矩阵。我们通过 SVG 的 技术，在 sRGB 空间内实现了光谱转换。

应用内复刻了 6 种最典型的色觉异常场景：

红色盲 (Protanopia) & 红色弱 (Protanomaly)：长波缺失，红色显得暗淡且偏黄。

绿色盲 (Deuteranopia) & 绿色弱 (Deuteranomaly)：最常见的色盲类型，红绿混淆。

蓝色盲 (Tritanopia)：短波缺失，会将蓝黄混淆，天空在他们眼中可能偏青色。

全色盲 (Achromatopsia)：极其罕见，世界仅剩明暗灰度。

2. 创新的“光谱透视镜”交互

默认的光谱模式下，我们提供了一条全色相的渐变色带。

在桌面端，当你将鼠标悬停在色带上时，会出现一个“透视镜（Lens）”。透视镜内显示的是正常色觉，而镜外则是色盲视角。这种滑动的对比体验，能让你最直观地感受到特定色彩（如红绿色）是如何在色觉异常者眼中“消失”的。

3. 一键上传，实景同理心测试

点击右上角的“上传图片”，应用会自动切换为画廊对比模式。你可以上传自己的设计稿、风景照或是数据图表。应用会在本地极速渲染出 7 种不同的视觉效果。长按（或鼠标按下）任意一张图片，滤镜会瞬间褪去显示原图——这种强烈的视觉反差，是检验产品无障碍设计（Accessibility）的最佳利器。

🛠️ 极简优雅的技术实现

作为开发挑战的第 50 个作品，这款应用在代码设计上也追求了极致的优雅：

零服务器依赖：图片上传基于 HTML5 FileReader API 纯本地读取，结合 background-image 渲染，绝不上传任何用户隐私数据。

SVG 滤镜黑科技：无需引入庞大的 Canvas 图像处理库，利用浏览器原生的 SVG 和硬件加速，实现了丝滑的零延迟滤镜切换。

Tailwind CSS 响应式布局：无论是 PC 端的透视镜，还是移动端的长按交互，都做了精细的断点适配。

💡 为什么我们需要这款工具？

设计，应当包容每一个人。

全球有约 8% 的男性和 0.5% 的女性患有不同程度的色觉异常。当我们在设计数据图表（比如股市的红涨绿跌）、警告提示、或者游戏 UI 时，如果仅仅依赖颜色来传递核心信息，就会将这部分用户拒之门外。

我们希望这款 全谱系色觉模拟器 能成为每一个设计师、前端开发者和产品经理收藏夹里的常备工具。在发布你的下一个功能前，不妨把它丢进模拟器里看一眼：当颜色失去魔力，你的设计依然好用吗？