跳到主要内容
Color Codes

无障碍检查

色盲模拟器 - 检查配色与图片的色盲可辨性

模拟红色盲、绿色盲、蓝色盲和全色盲下的配色与图片效果,找出色觉障碍人群可能混淆的颜色组合。

要检查的颜色

常规视觉

大多数人看到的颜色。

红色盲

有 2 组颜色可能混淆

缺少感红视锥细胞:红色变暗,偏向棕色和橄榄色。

  • #2CA02C 与 #FF7F0E 看起来相近
  • #1F77B4 与 #9467BD 看起来相近

绿色盲

有 2 组颜色可能混淆

缺少感绿视锥细胞:红色和绿色难以区分。

  • #D62728 与 #2CA02C 看起来相近
  • #1F77B4 与 #9467BD 看起来相近

蓝色盲

所有颜色都能区分

缺少感蓝视锥细胞:蓝与绿、黄与粉容易混淆。

全色盲

有 4 组颜色可能混淆

没有色觉:只剩下明暗差异。

  • #D62728 与 #1F77B4 看起来相近
  • #D62728 与 #9467BD 看起来相近
  • #2CA02C 与 #9467BD 看起来相近
  • #1F77B4 与 #9467BD 看起来相近

采用 Machado、Oliveira 与 Fernandes(2009)模型的完全程度模拟;更常见的轻度色弱看起来会更接近常规视觉。

如何使用

大约每 12 位男性和每 200 位女性中就有 1 人存在某种色觉障碍。输入配色或上传截图,即可查看四种色盲类型下的效果。工具还会标出在你看来不同、但在某种色盲下几乎相同的颜色组合,这对图表、状态色和链接尤为重要。

  1. 1 输入配色颜色或上传图片。
  2. 2 对比不同色觉类型看到的效果。
  3. 3 通过调整明度而不仅是色相来修复被标出的组合。

常见问题

模拟了哪些色盲类型?

红色盲(Protanopia)、绿色盲(Deuteranopia)、蓝色盲(Tritanopia)和全色盲(Achromatopsia)。其中红绿色盲最为常见。

模拟有多准确?

采用被广泛引用的 Machado、Oliveira 与 Fernandes(2009)模型,按完全程度模拟。真实感知因人而异,较轻的色弱看起来更接近常规视觉。

怎样让所有人都能区分颜色?

让重要颜色在明度上拉开差距,而不只是色相不同;同时配合文字、图标或图案,确保信息不只依赖颜色传达(WCAG 1.4.1)。

图片会被上传吗?

不会。图片通过浏览器内的 Canvas API 处理,不会离开你的设备。