无需登录 数据私有 本地保存

全色盲模拟预览 - 网页URL转色觉障碍视图

16
0
0
0
网页URL
快速预设：
部分网站因安全策略可能无法在iframe中加载，可切换至"图片上传"模式使用截图。
色觉障碍类型
全色盲
红色盲
红色弱
绿色盲
绿色弱
蓝色盲
蓝色弱
原始视图 正常视觉

输入URL并点击"预览"按钮

色盲模拟视图 全色盲

选择色盲类型后将在此显示模拟效果

常见问题与知识点

色觉障碍（CVD，Color Vision Deficiency）是指人眼对颜色感知能力受损的状况。最常见的是红绿色盲，约占男性的8%、女性的0.5%。主要类型包括：红色盲（Protanopia）——L锥体细胞缺失，无法感知红色；绿色盲（Deuteranopia）——M锥体细胞缺失，无法感知绿色；蓝色盲（Tritanopia）——S锥体细胞缺失，极为罕见；全色盲（Achromatopsia）——完全无法感知颜色，只能看到灰度。此外还有对应的"色弱"类型（Protanomaly、Deuteranomaly、Tritanomaly），即锥体细胞功能减弱但未完全缺失。

全球约有3亿人存在不同程度的色觉障碍。在网页设计中，如果仅依赖颜色来传达信息（如红色表示错误、绿色表示成功），色盲用户可能完全无法区分。WCAG 2.1无障碍指南明确要求：颜色不能作为传达信息的唯一手段。通过色盲模拟预览工具，设计师和开发者可以在设计阶段就发现潜在问题，确保网站对所有人友好。这不仅是社会责任，也符合越来越多的法律合规要求。

步骤：① 在输入框中填入待测试网页的URL，点击"预览"；② 在色觉障碍类型中选择不同选项，观察右侧模拟视图的变化；③ 检查关键信息（如按钮、警告提示、图表、链接等）在模拟视图中是否依然可辨识；④ 如果某些信息在色盲模拟中"消失"了，说明该设计过度依赖颜色区分，需要增加图标、文字标签、图案或形状等辅助手段。对于无法在iframe中加载的网站，可切换到"图片上传"模式，上传网页截图进行分析。

本工具使用颜色矩阵变换（Color Matrix Transformation）来模拟色盲效果。通过SVG的feColorMatrix滤镜或Canvas像素处理，将原始RGB颜色乘以特定的4×5变换矩阵。这些矩阵基于人眼锥体细胞的生理学模型——Brettel-Viénot-Mollon算法，模拟了L、M、S三种锥体细胞缺失或功能减弱时的颜色感知。例如，红色盲矩阵会将红色通道的信号重新分配到绿色和蓝色通道，从而模拟L锥体缺失的视觉效果。该算法在学术界和工业界被广泛认可。

很多网站设置了X-Frame-Options或Content-Security-Policy头，禁止自身被嵌入到iframe中（这是为了防止点击劫持等安全攻击）。当遇到这种情况时，iframe会显示空白或浏览器错误页。解决方案：切换到"图片上传"模式，使用浏览器截图工具（如Chrome DevTools的截图功能、系统截图工具或浏览器扩展）截取网页截图，然后上传到本工具进行分析。上传的图片会通过Canvas在本地进行像素级色盲模拟处理，完全在浏览器端完成，不会上传到服务器。

不能完全还原。色盲模拟基于数学模型，是对真实色觉障碍的近似模拟。真实色盲的体验因人而异：不同个体的锥体细胞缺失程度不同，大脑还会进行补偿性适应。此外，显示器的色域、亮度、对比度设置也会影响模拟效果。色弱（Anomaly）的程度更是一个连续谱系，本工具提供的"色弱"选项是典型的50%强度模拟。因此，本工具更适合作为设计参考和意识提升工具，而非精确的医学诊断工具。建议结合真实的色盲用户测试来获得更准确的结果。
🔧 相关工具