看得见，不代表人人都看得懂：数据可视化为什么越来越需要“无障碍设计”？

作者：Echo_Wish

不知道大家有没有遇到过这样的情况。

辛辛苦苦做了一张 BI 大屏，自认为炫酷到飞起：深色背景、五颜六色的折线、各种渐变动画、数字疯狂滚动。

结果领导来了第一句话：

“这个红色和绿色有什么区别？”

“字能不能再大一点？”

“手机上怎么看不清？”

更扎心的是，如果你的用户里面有色弱、老年人、视力障碍用户，那么你的可视化对于他们来说，可能不是不好看，而是根本看不懂。

很多人觉得数据可视化=漂亮。

但真正优秀的数据可视化，其实应该做到一句话：

任何人，都能快速理解你的数据。

这，就是今天想聊的话题——数据可视化的可访问性（Accessibility）设计。

为什么越来越重视无障碍设计？

以前做 BI，大多数人关注的是：

• 图表炫不炫
• 动画酷不酷
• Dashboard 有没有科技感

现在越来越多企业开始把另外几个指标放到了第一位：

• 是否人人看得懂
• 是否适合老人使用
• 是否支持屏幕阅读器
• 是否符合国际 Accessibility 标准

原因其实很简单。

数据已经不是给分析师看的了。

现在的数据平台面对的是：

• 企业管理层
• 一线员工
• 客户
• 合作伙伴
• 政府部门

甚至还有各种移动端、小程序、大屏、Pad。

用户越复杂，可访问性的重要性越高。

真正优秀的数据产品，不应该挑用户。

第一条原则：不要只靠颜色表达信息

这是几乎所有新人都会踩的大坑。

例如下面这种代码。

import matplotlib.pyplot as plt

x = ["正常", "异常"]
y = [95, 5]

plt.bar(x, y, color=["green", "red"])
plt.show()

开发觉得：

绿色代表正常。

红色代表异常。

没有任何问题。

但对于红绿色弱用户来说。

看到的是这样：

██████
██████

两个颜色几乎没有区别。

怎么办？

正确做法应该是：

除了颜色，再增加一种视觉编码。

例如：

• 图案
• 标签
• 图标
• 文字
• 边框

例如：

plt.bar(
    x,
    y,
    color=["#4CAF50", "#F44336"],
    hatch=["", "//"]
)

即使颜色看不出来，

用户依旧能够通过纹理区分。

永远记住一句话：

颜色只能辅助表达，不能承担全部表达。

第二条原则：字体千万别太小

很多 BI 大屏喜欢这样：

12px

10px

甚至8px……

开发觉得：

页面利用率真高。

用户觉得：

眼睛快瞎了……

尤其很多工厂 MES 大屏。

安装位置距离操作人员三四米。

结果字体还是12px。

完全看不清。

建议：

普通网页：

正文 ≥16px

大屏：

20~28px

关键指标：

32px+

千万不要为了炫酷，把字体做成"蚂蚁字"。

第三条原则：不要迷信深色背景

现在的大屏几乎清一色：

黑色背景

蓝色发光

绿色数字

紫色渐变

确实很有科技感。

但是：

长时间观看非常容易疲劳。

尤其：

#00FFFF

#00FF00

#FF00FF

这些高饱和颜色。

看十分钟眼睛都开始酸。

更合理的是：

控制背景与文字的对比度。

例如：

背景：

#1F2937

文字：

#F8FAFC

既舒服。

又清晰。

第四条原则：动态图不要太多

很多人做 Dashboard：

数字一直滚。

柱状图一直跳。

地图一直旋转。

卡片一直闪。

开发觉得：

好高级。

用户：

到底让我看数据还是看动画？

动画真正的作用应该是：

引导注意力。

而不是：

抢占注意力。

例如：

新增异常数据时：

if status == "warning":
    highlight_card()

只有真正重要的信息。

才值得动画。

否则。

静态，就是最好的设计。

第五条原则：图表不是越复杂越高级

很多 BI 喜欢堆：

• 雷达图
• 桑基图
• 弦图
• 日晷图
• 南丁格尔图

领导看五分钟：

这是啥？

其实。

80%的业务分析：

下面几个就够了。

简单，永远比复杂更高级。

第六条原则：让屏幕阅读器也能理解图表

这一点国内很多团队几乎没人做。

如果你的网页用了 SVG 或 Canvas。

建议增加辅助描述。

例如：

<img
    alt="2025年销售额持续增长，第三季度达到全年最高值"
/>

或者：

<figure>
    <figcaption>
        本图展示近12个月销售趋势，整体呈持续增长。
    </figcaption>
</figure>

这样。

即使看不到图片。

屏幕阅读器也能把图表内容读出来。

这就是无障碍设计真正的意义。

第七条原则：键盘也应该能操作

很多 BI 系统。

全部依赖鼠标。

但是：

很多残障用户。

只能使用：

• Tab
• Enter
• Space
• Arrow

因此。

按钮应该支持：

<button tabindex="0">
查看详情
</button>

快捷键切换：

document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowRight") {
        nextPage();
    }
});

优秀的数据产品。

不仅支持点击。

也支持键盘操作。

第八条原则：移动端同样属于可访问性的一部分

很多企业现在都有移动 BI。

结果电脑上的图表直接缩小。

于是：

原来二十个维度。

手机屏幕全部挤在一起。

建议：

移动端重新布局。

例如：

if screen_width < 768:
    chart_type = "bar"
    legend_position = "bottom"

同样的数据。

不同终端。

应该有不同的展示方式。

这才是真正的响应式设计。

一个真实的案例

之前有位朋友做工厂生产驾驶舱。

最开始页面特别炫。

用了十几种颜色。

各种动态效果。

结果现场车间主管反馈：

“我每天就想知道今天有没有异常、哪条产线停了、良率有没有下降，其它动画我根本不会看。”

后来，他们把页面重新设计：

• 去掉80%的动画
• 保留三种主色
• 字体整体放大
• 异常增加图标和文字提示
• 所有关键指标支持键盘切换与语音读取

上线后，培训时间明显缩短，新员工几乎不用额外讲解就能快速找到重点信息，日常使用中的误读也少了很多。

这件事让我更加确信：

真正优秀的可视化，不是让人惊叹"做得真酷"，而是让人自然地说出"我一下就看懂了"。

写在最后

这些年，大家聊数据可视化，讨论最多的是 ECharts、Tableau、Power BI、Superset，比拼的是谁的图表更炫、动画更流畅、页面更有科技感。

可随着数据产品服务的人群越来越广，我们应该把关注点慢慢转移到另一个问题上：

有没有人，因为我们的设计，而被挡在了数据之外？

无障碍设计不是给少数人准备的特殊功能，而是一种普适性的设计理念。它照顾的是色弱用户、老年人、视力受限的人，也照顾那些在强光环境下看屏幕、在手机上查看报表、第一次接触系统的新用户。

很多时候，我们多加一句说明、多放大一点字体、多提供一种颜色之外的表达方式，成本并不高，却能让更多人真正理解数据。

技术最终是为人服务的。

数据可视化也一样。

一张优秀的图表，不应该只是设计师眼中的艺术品，更应该成为每一个人都能轻松阅读、准确理解的信息载体。

当你下一次准备给图表加一个炫目的动画时，不妨先问自己一句：

如果去掉所有特效，它还能让每一个人一眼看懂吗？

如果答案是肯定的，那么这张图，才真正称得上是一张优秀的数据可视化作品。