D1.04.2Focus indicator contrast设计研究
焦点环需在任意背景上保持对比
别名: focus ring · focus appearance · contrast · keyboard focus
概念解释
焦点指示对比（focus indicator contrast）指焦点环或其他键盘焦点标记必须从其紧邻的背景与组件边缘中清晰分离。焦点已存在但看不见，与没有焦点对键盘用户的效果相同。这里的「任意背景」不是指一个颜色样本，而是组件可能出现的实况：浅色和深色主题、选中或禁用邻态、图片、渐变、悬停叠层、数据可视化和高对比模式都不能把焦点标记吞没。
机制
焦点环通常很细，且位于组件边缘；它最容易与边框、阴影、选中填色或内容纹理混在一起。一个固定颜色在白底上醒目，不代表在同色按钮、深色卡片或照片上仍有边界。用户在键盘导航时依靠外周视觉快速捕捉焦点，低对比或断裂的轮廓会迫使他们停下来逐项检查，从而把原本连续的导航变成视觉搜索。双层描边、背景适配或足够宽的轮廓能提供冗余的边界差异，而不是单押一个品牌色。
怎么研究
应建立组件状态矩阵：对每种可聚焦组件，在默认、悬停、选中、错误、禁用相邻态、深浅主题、滚动容器与图片背景上截取焦点画面并进行对比检查。自动化图像或样式测试可发现被覆盖和裁切，但仍需让键盘用户完成目标查找与表单填写，测量首次发现焦点的时间及误激活。只在白底的组件库预览中检验会漏掉真实内容区的组合状态；放大、系统强制颜色和浏览器默认绘制也应纳入测试。
边界
高对比不等于使用刺眼或不断闪动的轮廓。焦点应在不抢夺主要内容的前提下可见，且与错误、警告或选中等其他状态保持可区分。完全由平台绘制的原生控件可能受系统主题与用户设置控制，应用不应覆盖后再假定自己的颜色可靠；自定义控件则不能因品牌视觉而逃避对复杂背景的测试。对不可聚焦元素增加「焦点环」只会制造假的操作暗示。
怎么落地
- 在组件令牌之外维护焦点在不同背景上的状态矩阵，逐一检查边界是否同时区别于组件与周围表面。
- 优先使用双层轮廓、偏移描边或足够厚的指示，而非只改变与某个背景偶然对比的单一颜色。
- 让深色主题、图片卡片、选中行、错误字段和覆盖层进入视觉回归与键盘走查样本。
- 在真实流程中让用户仅凭焦点完成导航；若需要把脸凑近屏幕、暂停寻找或误按邻近项，就调整指示形态与背景关系。