可访问性 / 3 分钟阅读
对比度通过之后,还要看什么
检查一组颜色只是开始;字号、背景、焦点和错误状态仍然需要放进真实页面验证。
浅灰文字配白底很常见,但视觉上的轻盈也可能增加阅读难度。对比度工具的好处,是把一个容易凭感觉争论的问题,变成可以检查的颜色关系。它的边界同样要说清:一次计算只代表输入的颜色组合,不能替整页作出可访问性结论。
先把输入弄对
输入实际文字色和它背后的颜色,不要从截图里抗锯齿后的字缘取一个偶然的灰色。如果文字放在半透明卡片或图片上,背景可能随位置变化,两个固定色值就未必代表最差情况。先找到实际相邻的颜色,再决定需要测试多少组。
WCAG AA 对普通文本的最低对比度为 4.5:1,大文本为 3:1;判断必须使用未四舍五入的结果。大文本也有字号条件,不能因为它被命名为“标题”就自动使用较低阈值。W3C 文本对比度
用一个小差别理解边界
在白底上,#777777 的计算结果约为 4.478:1,没有达到普通文本 AA 阈值;改成 #767676 后约为 4.542:1,刚刚通过。这里的数值由 WCAG 相对亮度公式计算。界面可以显示两位小数,但不能先把结果四舍五入,再决定是否通过。
这个例子不是要求所有正文都使用后一种灰色。恰恰相反,刚过线意味着余量很小。细字、长段落、特殊字体和复杂背景,仍然需要在页面里观察。为了保住一种很浅的颜色而不断放大文字,也可能破坏信息层级;试着同时比较更深的文字色与更清楚的背景。
检查完整的状态集合
正文以外,链接、输入框、按钮和焦点指示也要看。某个按钮在默认状态清楚,不代表悬停或获得焦点后仍然清楚。必要的非文本视觉信息另有对比度要求,但纯装饰线不能与所有控件边界简单混为一谈。W3C 非文本对比度
错误也不应只靠变红来表达。把“有问题”写成可以理解的文字,例如“名称最多八十字,请缩短后重试”,让颜色成为辅助,而不是唯一线索。W3C 颜色的使用
今天的练习是在配色检视中比较三组组合:正文、辅助说明和一个按钮。保存每组的前景、背景、用途与实际结果,再回到页面检查键盘焦点和错误提示。若某一组不通过,先修改那组必要信息,不必把整个网站都换成黑白。
把结果记录成“此颜色组合达到普通文本阈值”,比写“网站已通过 WCAG”更准确。可访问性是许多具体行为的共同结果,数字帮助我们发现问题,真正的使用过程帮助我们完成判断。