看得见，不代表人人都看得懂：数据可视化为什么越来越需要“无障碍设计”？
作者：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
src="sales.png"
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，比拼的是谁的图表更炫、动画更流畅、页面更有科技感。
可随着数据产品服务的人群越来越广，我们应该把关注点慢慢转移到另一个问题上：
有没有人，因为我们的设计，而被挡在了数据之外？
无障碍设计不是给少数人准备的特殊功能，而是一种普适性的设计理念。它照顾的是色弱用户、老年人、视力受限的人，也照顾那些在强光环境下看屏幕、在手机上查看报表、第一次接触系统的新用户。
很多时候，我们多加一句说明、多放大一点字体、多提供一种颜色之外的表达方式，成本并不高，却能让更多人真正理解数据。
技术最终是为人服务的。
数据可视化也一样。
一张优秀的图表，不应该只是设计师眼中的艺术品，更应该成为每一个人都能轻松阅读、准确理解的信息载体。
当你下一次准备给图表加一个炫目的动画时，不妨先问自己一句：
如果去掉所有特效，它还能让每一个人一眼看懂吗？
如果答案是肯定的，那么这张图，才真正称得上是一张优秀的数据可视化作品。
