链接不能仅靠颜色与正文区分
别名: 链接下划线 · inline link · 链接不只靠蓝色
概念解释
一段正文里夹着链接,如果和周围的字只差一个色相——没有下划线、没有字重、没有图标——找链接就变成在找一种颜色。色觉不同、屏幕偏色、打印成灰时,链接会沉进正文。链接必须靠颜色以外的特征从正文里被找出来。这和链接文字相对背景够不够对比不是同一件事:后者是字与底,前者是字与字。
机制
在段落里搜链接是视觉搜索。若唯一特征是色相,搜索键在色觉或显示条件变化时消失。下划线是空间特征(一条高频的水平结构),灰度、单色显示、色觉差异都还在。仅靠「链接蓝比正文深一点」还要求这条亮度差本身稳定;许多「不刺眼」的样式把链接做成微微偏蓝的灰,亮度差不够,色相一塌就全没了。
悬停才出现下划线,等于把可发现性关在指针后面:键盘用户 Tab 到才能看见,触屏没有悬停,扫读的人不会把每个词都摸一遍。已访问/未访问若也只靠颜色,是同一缺陷的第二种形态。导航条、按钮、整张卡片可点,组件外形已经在说「这是入口」,不必再给每只按钮加下划线;要卡的是跑在句子里的内联链接。
怎么研究
去色后数一段里能找出的链接,对照有下划线、仅颜色、仅悬停下划线。测量链接色与相邻正文色的对比(不是链接与背景)。
自变量:视觉线索(仅色相 / 下划线 / 字重 / 悬停才出现)、链接-正文对比。 因变量:找到的链接数、漏检率、任务中误把正文当链接或反向的次数。
键盘-only 走一段含多个内联链接的说明文,看焦点出现之前人能不能预知哪里可点。
边界
按钮、菜单项、卡片式入口已经有控件外形,不要求再加下划线。站内导航若全部是链接列表,项目符号或位置就是线索。法律正文里下划线过密会妨碍阅读,可用字重加稳定的链接-正文对比作为替代,但仍须在去色后可找。占位符「点击这里」即使有下划线,名称质量是另一件事。
怎么落地
- 内联链接默认带下划线(或同等稳定的非颜色特征),不要把去线当作默认品牌。
- 不要用悬停才显示的下划线当唯一线索。
- 已访问态若要区分,加第二特征(变虚线、加小标),不要只换色相。
- 验证:去色打印一段正文,圈出所有链接,对照 DOM 里的
a。漏圈的补非颜色特征。关掉鼠标用键盘读这一段,确认没悬停时链接仍能从正文里被看见。