EST. 2026 · JQJ.CCJOURNEY · QUEST · JUNCTION一份持续生长的独立出版物

可访问性 / 3 分钟阅读

对比度通过之后,还要看什么

检查一组颜色只是开始;字号、背景、焦点和错误状态仍然需要放进真实页面验证。

浅灰文字配白底很常见,但视觉上的轻盈也可能增加阅读难度。对比度工具的好处,是把一个容易凭感觉争论的问题,变成可以检查的颜色关系。它的边界同样要说清:一次计算只代表输入的颜色组合,不能替整页作出可访问性结论。

先把输入弄对

输入实际文字色和它背后的颜色,不要从截图里抗锯齿后的字缘取一个偶然的灰色。如果文字放在半透明卡片或图片上,背景可能随位置变化,两个固定色值就未必代表最差情况。先找到实际相邻的颜色,再决定需要测试多少组。

WCAG AA 对普通文本的最低对比度为 4.5:1,大文本为 3:1;判断必须使用未四舍五入的结果。大文本也有字号条件,不能因为它被命名为“标题”就自动使用较低阈值。W3C 文本对比度

用一个小差别理解边界

在白底上,#777777 的计算结果约为 4.478:1,没有达到普通文本 AA 阈值;改成 #767676 后约为 4.542:1,刚刚通过。这里的数值由 WCAG 相对亮度公式计算。界面可以显示两位小数,但不能先把结果四舍五入,再决定是否通过。

这个例子不是要求所有正文都使用后一种灰色。恰恰相反,刚过线意味着余量很小。细字、长段落、特殊字体和复杂背景,仍然需要在页面里观察。为了保住一种很浅的颜色而不断放大文字,也可能破坏信息层级;试着同时比较更深的文字色与更清楚的背景。

检查完整的状态集合

正文以外,链接、输入框、按钮和焦点指示也要看。某个按钮在默认状态清楚,不代表悬停或获得焦点后仍然清楚。必要的非文本视觉信息另有对比度要求,但纯装饰线不能与所有控件边界简单混为一谈。W3C 非文本对比度

错误也不应只靠变红来表达。把“有问题”写成可以理解的文字,例如“名称最多八十字,请缩短后重试”,让颜色成为辅助,而不是唯一线索。W3C 颜色的使用

今天的练习是在配色检视中比较三组组合:正文、辅助说明和一个按钮。保存每组的前景、背景、用途与实际结果,再回到页面检查键盘焦点和错误提示。若某一组不通过,先修改那组必要信息,不必把整个网站都换成黑白。

把结果记录成“此颜色组合达到普通文本阈值”,比写“网站已通过 WCAG”更准确。可访问性是许多具体行为的共同结果,数字帮助我们发现问题,真正的使用过程帮助我们完成判断。

接着读

← 返回文存索引沿主题继续阅读 →