news 2026/2/17 5:15:05

如何为色盲人士创建可访问的图表

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
如何为色盲人士创建可访问的图表

原文:towardsdatascience.com/how-to-create-accessible-graphs-for-colorblind-people-295e517c9b15

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/5ee134235b43177c165597573f5501ff.png

作者使用 Midjourney 创建的图像。

色盲,或更准确地说,色觉缺陷,影响多达 8%的男性和 0.5%的女性。最常见的情况是红绿色盲,这是一种先天性失调,其中人们在视网膜上缺乏对红色或绿色的感受器。因此,他们无法区分红色和绿色、青色和灰色、蓝色和紫色等颜色对。

对于数据科学家来说,在选择图表的颜色方案时考虑色盲用户是很重要的。相当一部分用户将会有某种形式的色觉缺陷,他们可能对图表的理解与预期不同。事实上,当我直接主管无法阅读我的折线图时,我意识到了这一点,结果是他难以区分红色和绿色。

在这篇文章中,我将分享

  • 用于最常见的色盲形式的 Python 模拟器

  • matplotlib 和 seaborn 默认颜色方案的可用性测试

  • 使用 ColorBrewer 创建可访问的颜色方案

色盲是什么样的?

色觉是由视网膜中的锥状细胞实现的。有三种不同类型的锥状细胞分别接收红光、绿光和蓝光。红绿色盲的人缺乏检测红光或绿光的锥状细胞。两种锥状细胞都缺乏,只剩下蓝光感受器的情况很少见,同样缺乏蓝光感受器和全色盲,即所有色觉感受器的缺失也很少见。

对于能够看到所有颜色的人来说,很难想象色盲人士看到的图表是什么样的。色盲模拟器是检查你的图形可访问性的有用工具。以下面板中的模拟是通过DaltonLens 在线色盲模拟器制作的,使用了Brettel算法。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/1d9d3f3beba9d9f026236139c846c429.png

原图由作者使用 Midjourney 生成。通过 Dalton 镜片进行色盲模拟的变体。daltonlens.org/colorblindness-simulator


Python 模拟器

DaltonLens 项目提供了模拟色觉缺陷的几个算法的实现。源代码可在 Github 上找到,并且可以使用以下命令安装库本身:

pip install daltonlens

我们使用 Python 图像库(PIL)和一个由两条线组成的图表组成的测试图像。测试图像由以下代码行生成并保存为 png 图像文件。

frommatplotlibimportpyplotaspltimportnumpyasnp# Create a test image featuring two line plotsfig,ax=plt.subplots(1,1)ax.plot(x,y1,label='data 1',color='red')ax.plot(x,y2,label='data 2',color='green')ax.set_xlabel('x')ax.set_ylabel('y')ax.legend()plt.savefig('./plots/2024-dalton-lines.jpg',bbox_inches='tight')

然后,我们加载测试图像,色盲模拟器将 RGB 值转换,以便转换后的图像与色觉缺陷的人的感知相似。

fromdaltonlensimportconvert,simulate,generateimportPIL# Load the original image and convert it to a numpy arrayim=np.asarray(PIL.Image.open('./plots/2024-dalton-lines.jpg').convert('RGB'))# Create a simulator using the Brettel 1997 algorithm.simulator=simulate.Simulator_Brettel1997()# Apply the simulator to the input image to get a simulation of deutan anomaly ("green-blindness")greenblind_im=simulator.simulate_cvd(im,simulate.Deficiency.DEUTAN,severity=1.0)# Create an image from the transformed arrayim2=PIL.Image.fromarray(protan_im)

两个图像并排比较显示,模拟绿色盲版本(中间和右侧)中左侧的红色和绿色线条几乎看不见。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/9a1d3fea776b0765dd151e272ea03088.png

使用 daltonlens 软件包模拟绿色色觉缺陷的图表。图像由作者创建。

daltonlens库包含不同类型色觉缺陷的模拟器。可以通过传递simulate.Deficiency.{DEUTAN, TRITAN, PROTAN}的实例到模拟器中来改变它们。

  • DEUTAN对应绿色盲(约 6% 的男性和 0.39% 的女性人口)。

  • PROTAN对应红色盲(约 2% 的男性和 0.04% 的女性人口)。

  • TRITAN对应蓝色盲(非常罕见,受影响比例不到 0.002%)。

此外,可以选择不同的算法,尽管他们的网站上推荐 Bretter 和 Viennot 算法。

色盲模拟是如何工作的?

在底层,算法执行矩阵变换。一个 RGB 图像可以表示为一个数组,其中每个像素对应一个包含红色、绿色和蓝色值的数组。

这个 RGB 像素数组被转换成一个表示,其中视网膜上的三种锥体(L、M 和 S)形成坐标系。在这个表示中,像素值根据缺陷的锥体和色觉缺陷的严重程度进行转换。

最后,数组被转换回 RGB,以便可以在显示器上正确显示。


默认颜色方案的可访问性如何?

Python 的默认绘图库是 matplotlib。线图的默认颜色方案由八种颜色组成。以下图显示了所有八种颜色的线图。当我们模拟绿色盲的人看到这个图表的样子时,我们看到颜色仍然可以区分,尽管它们看起来比原始图表更接近。例如,蓝色和紫色(C0 和 C4)几乎无法区分。红色、绿色和棕色(C2、C3、C5)也是如此。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/c5e2337a4942e514348dd454a0529b29.png

默认 matplotlib 颜色周期的八种颜色。左:原始颜色。右:模拟绿色盲。图像由作者创建。

在这种情况下,一个可访问的图表会使用线型(虚线、点线和实线)。此外,我不会在图表中使用过多的线条,因为这会使图表变得杂乱。

使用热图显示二维数据。以下代码生成样本数据,并使用在红色、黄色和绿色之间变化的颜色图。然后对其进行处理以模拟绿色盲。我们使用严重程度参数来改变颜色视觉缺失的程度,在这种情况下为 75%到 100%。

# create an example figurefig,ax=plt.subplots(1,1)xx,yy=np.meshgrid(np.linspace(0,2*np.pi,40),np.linspace(0,2*np.pi,40))zz=np.cos(xx)+np.sin(yy)img=ax.imshow(zz,cmap='RdYlGn')plt.colorbar(img)ax.set_xlabel('x')ax.set_ylabel('y')fig.tight_layout()plt.savefig('./plots/2024-dalton-mpl-heat-rdylgn.jpg')# simulate 75% green-blindnessim=np.asarray(PIL.Image.open('./plots/2024-dalton-mpl-heat-rdylgn.jpg').convert('RGB'))simulator=simulate.Simulator_Brettel1997()greenblind_im=simulator.simulate_cvd(im,simulate.Deficiency.DEUTAN,severity=0.75)im2=PIL.Image.fromarray(greenblind_im)im2# simulate full green-blindnessim=np.asarray(PIL.Image.open('./plots/2024-dalton-mpl-heat-rdylgn.jpg').convert('RGB'))simulator=simulate.Simulator_Brettel1997()greenblind_im=simulator.simulate_cvd(im,simulate.Deficiency.DEUTAN,severity=1.0)im3=PIL.Image.fromarray(greenblind_im)im3

结果图显示,这种颜色图对色盲人士来说是一个糟糕的选择。正负值出现在相同的色调中。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/5ac7aa283870937561b8454626d5e313.png

模拟的 2D 热图颜色视觉缺失。图像由作者创建。

幸运的是,有一些颜色调色板更适合色盲人士。下一面板显示了一个使用 viridis 颜色图的 heatmap,颜色从黄色循环到蓝色。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/15489f8f14b73b222c3e542c0b0b41f0.png

模拟 viridis 调色板颜色视觉缺失。图像由作者创建。

统计图表,如条形图,通常使用颜色来提高可读性。我们使用 seaborn 绘图库和默认颜色调色板来创建玩具数据的条形图。

# create example bar plotimportpandasaspdimportseabornassns fig,ax=plt.subplots(1,1)x=['A','B','C','D','E','F','G','H']y=np.random.rand(len(x))data=pd.DataFrame(dict(x=x,y=y))# plot with seabornsns.barplot(data=data,x=x,y=y)ax.set_xlabel('Category')ax.set_ylabel('Value')fig.tight_layout()plt.savefig('./plots/2024-dalton-bar.jpg')# simulate green-blindnessim=np.asarray(PIL.Image.open('./plots/2024-dalton-bar.jpg').convert('RGB'))simulator=simulate.Simulator_Brettel1997()greenblind_im=simulator.simulate_cvd(im,simulate.Deficiency.DEUTAN,severity=1.0)im2=PIL.Image.fromarray(greenblind_im)im2

结果条形图显示在 seaborn 的默认颜色调色板中,与 matplotlib 相同。我发现颜色类别 C、D、F(绿色、红色和棕色)在右侧的色盲版本中非常接近。在这种情况下,颜色对图表的贡献不大,我建议所有条形都使用相同的颜色。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/66133c41a585f639a93c5fbb2f66c6f1.png

Seaborn 条形图。图像由作者创建。


ColorBrewer 调色板

当我想创建自己的颜色调色板而不依赖于 matplotlib 和 seaborn 中可用的默认调色板时,我通常会转向ColorBrewer网站。尽管该网站最初是为地图数据创建的,但它有一个方便的功能,用于创建色盲友好型调色板。

用户可以创建最多 12 种不同颜色的颜色调色板。生成的调色板可以导出为十六进制颜色,用于 matplotlib 等绘图工具。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/13d29aac28beed582b05d169026e58fb.png

ColorBrewer 网站的截图。由作者创建。


摘要

色觉缺失很常见。大约有 8%的人受到一定程度的影响,其中绿色盲和红色盲是最常见的类型。图表通过颜色传达其意义,例如,在图表中显示多条线,以及展示 2D 热图。

色盲模拟器是测试图表可访问性的有用工具。它们可以直接导入到 Python 代码中,以便在任何项目中快速使用。

在选择颜色和调色板时,进行色盲检查有助于提高你图表的可访问性,并确保它们能够传达信息给任何用户。

https://github.com/OpenDocCN/towardsdatascience-blog-zh-2024/raw/master/docs/img/892ed10150fac0946af80c0b006c2072.png

作者使用 Midjourney 创建的图像。

参考文献

  • 开源色盲模拟器综述:daltonlens.org/opensource-cvd-simulation/

  • 色盲模拟器:daltonlens.org/colorblindness-simulator

  • ColorBrewer:colorbrewer2.org/

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/2/16 1:46:01

解决: macOS 长按一个键不连续输出

在 macOS 里,长按一个键不连续输出,而是弹出“重音字符选择框”(比如长按 a 出现 ā ǎ ),这是系统的默认行为。如果你想恢复成 长按=连续输入(aaaaaa),可以这样设置&am…

作者头像 李华
网站建设 2026/2/11 19:13:33

USB3.0引脚定义与连接器选型配合要点通俗解释

USB3.0引脚定义与连接器选型:硬件工程师必须掌握的实战指南你有没有遇到过这样的情况?一个看似完美的USB3.0电路板设计,烧录固件后却始终无法跑通高速模式——设备枚举正常,但传输速率被“降级”到USB2.0的480 Mbps。反复检查代码…

作者头像 李华
网站建设 2026/2/14 6:03:15

图解说明ESP32连接阿里云MQTT构建家庭安防系统

从零搭建智能安防系统:ESP32如何安全连接阿里云MQTT实现远程监控 你有没有过这样的经历?出门后突然怀疑门没锁好,或者深夜听到异响却无法确认是否有人闯入。传统的安防设备只能本地报警,根本解决不了“远程感知”这个核心痛点。 …

作者头像 李华
网站建设 2026/2/16 18:07:37

HID设备调试实战:常见枚举失败问题排查指南

HID设备调试实战:从枚举失败到稳定通信的深度排错指南 你有没有遇到过这样的场景? 新设计的HID触摸板插上电脑后毫无反应,设备管理器里显示“未知USB设备”;或者在某台笔记本上能用,在另一台却直接被系统忽略。更糟的…

作者头像 李华
网站建设 2026/2/13 2:32:10

Testing Essay

测试 一、本作业的目标 验证后端核心功能在前端是否正确实现,确保前后端数据交互正常,保障用户操作流程顺畅,为阿尔法冲刺项目质量提供支撑。 二,测试工作安排 为高效完成后端功能前端实现验证,本次测试按“准备-执…

作者头像 李华
网站建设 2026/2/14 20:35:51

LangFlow实体关系抽取管道实现方式

LangFlow 实现实体关系抽取管道的实践路径 在知识图谱、智能客服和金融风控等场景中,从非结构化文本中精准提取“谁对谁做了什么”这类三元组信息——即实体关系抽取——是构建智能化系统的关键一步。传统实现方式依赖大量定制代码与复杂的 NLP 模型调优&#xff0c…

作者头像 李华