
把涨跌从红绿换成蓝橙,是一个起点,不是无障碍设计的完成证明。读者可能把图打印成灰度,也可能在投影环境里看不清细线。数据的意义不能全部压在两个颜色上。
W3C 的颜色使用准则要求,再用文字、形状或其他视觉手段表达信息;非文本对比度说明对必要图形线索提出邻接对比要求。这里讨论的是具体图形的可辨识性,不拿一个地区的色觉缺陷发生率去推算整家公司。W3C 颜色使用准则、W3C 非文本对比度解释
同一个数值,至少有两个入口
折线可以使用不同点形和虚实线,末端写出序列名;柱图可以直接标类别与数值,异常另加图标和文字。颜色继续承担快速扫描的工作,但即使颜色消失,读者仍能确定“这条线是谁”。

自己算一次,别凭色名判断
def luminance(hex_color):
value = hex_color.lstrip('#')
if len(value) != 6:
raise ValueError('use six hex digits')
rgb = [int(value[i:i+2], 16) / 255 for i in (0, 2, 4)]
linear = [v / 12.92 if v <= 0.04045 else ((v + 0.055) / 1.055) ** 2.4 for v in rgb]
return sum(a * b for a, b in zip(linear, [0.2126, 0.7152, 0.0722]))
def contrast(a, b):
light, dark = sorted([luminance(a), luminance(b)], reverse=True)
return (light + 0.05) / (dark + 0.05)
blue, orange, white = '#0072B2', '#D55E00', '#FFFFFF'
assert contrast(blue, white) > 3
assert contrast(orange, white) > 3
assert contrast(blue, orange) < 3
print('blue/white:', round(contrast(blue, white), 3))
print('orange/white:', round(contrast(orange, white), 3))
print('blue/orange:', round(contrast(blue, orange), 3))
这组三色的结果很有启发:两种颜色与白底都超过 3:1,不代表彼此之间也超过。若两个色块紧贴且边界承担区分任务,可以加入足够对比的分隔线,或调整明度。文本字号、字重对应的要求还应单独检查,不能把非文本阈值套到所有小字上。
波普风可以保留,但装饰也有成本
粗黑边可以增强边界,过密的半调网点却可能吞掉小字。图表的重要数据区少放纹理,把纹理留给标题和空白区域;需要纹理编码时,图例里也要展示同样的纹理。
本例只验证 sRGB 数值计算,没有完成真实用户测试、屏幕阅读器检查或全套 WCAG 合规评估。正式看板还应检查键盘操作、焦点、数据表替代视图和缩放后的排版。无障碍不是一种配色风格,而是一组读者真正能使用的能力。
延伸阅读
- W3C 颜色使用准则
- W3C 非文本对比度解释


