色觉差异预览
并排比较图表或界面配色在三类色觉模拟及灰度下的变化。
浏览器本地处理输入HEX 配色输出颜色对照表
- 1添加输入
- 2确认后运行
- 3获取结果
工具输入和文件在当前浏览器处理，不会上传。
开始之前
粘贴图表、图例、地图或界面中的 2–12 个 HEX 颜色，同时查看红、绿、蓝色觉缺失模拟，并保存颜色对照表。
如何使用
- 输入同一设计中的 2–12 个六位 HEX 颜色，可换行、空格或逗号分隔。
- 按相同编号顺序并排查看三类模拟及灰度参考。
- 找出可能难以区分的颜色，在设计中补充非颜色线索，并另行检查文字对比度。需要时复制或下载 CSV。
支持范围与限制
使用 Machado 等人（2009）严重程度 1 矩阵，应用于线性光 sRGB；不同设备和个人的视觉体验会有差异。
配色预览无法模拟完整图片，也不代表通过无障碍验收或替代真实用户测试。除颜色外，还应使用文字、形状或图案。
输入仅在浏览器处理。可下载包含原色和模拟 HEX 值的 CSV。
操作示例
示例输入
#d94841 #78a22f #3769b8 #e2b642
示例参数
{}示例输出
original,protanopia,deuteranopia,tritanopia,grayscale #d94841,#70673f,#95873c,#ee1f48,#7b7b7b #78a22f,#aa971c,#a49439,#7c9b8b,#959595 #3769b8,#4370bb,#2d64b6,#007b87,#6a6a6a #e2b642,#cbb532,#d6c047,#f5a69e,#bcbcbc
出现问题时
输入 2–12 个六位 HEX 颜色，例如 #d94841；不要输入颜色名称、透明度通道或三位缩写。
常见问题
配色对照展示了什么？
每组带编号的颜色分别采用红、绿、蓝色觉缺失的严重程度 1 模型变换。灰度提供亮度参考。这只是近似预览，无法预测某个人的实际视觉。
结果能证明设计符合无障碍要求吗？
不能。配色列表缺少实际场景、相邻元素、文字大小和完整图片。请保留文字或形状线索，另行检查文字对比度，并与真实用户测试完整设计。
可以上传整张图表吗？
这里比较的是配色 HEX 值，不处理截图或图表文件。可把图表使用的颜色复制到配色输入框来检查它们之间的区别。
配色会发送到服务器吗？
不会。工具在浏览器中运行。如需保存，请在关闭标签页前下载 CSV。