焦点指示需在所有背景上可辨
别名: 焦点环对比 · focus-visible · 焦点可见
概念解释
键盘停在哪一个控件上，必须在那一块背景上能被看出来。2 px 的品牌蓝描边在白底页面上清楚，落到蓝色主按钮或照片英雄区上就会溶掉。焦点指示要在浅底、深底、品牌色块、图片、表格条纹上都能从紧邻像素里分出来。这不是「控件默认态的边框够不够黑」（那是非文本对比），而是「当前焦点这一圈记号」在它实际坐着的底上还在不在。
机制
焦点记号是记号色与紧邻像素的对比：控件填充、页面底、有时还有图片。单一色相的环无法同时满足这些底——蓝环在蓝按钮上对比趋近 1。双色环（外白内黑，或反过来）或内外描边，是用两条相反的亮度差去覆盖未知底：至少一条在当前底上能成立。
宽度也参与可辨性。1 px 抗锯齿环在高分屏和低视力放大里容易糊成底色的一部分。:focus-visible 决定什么时候画，不决定画出来够不够。深色模式、高对比模式会换底，只在浅色稿上调过的环会在反相页面上翻车。悬停加深填充是指针态的对比问题，不能拿来代替键盘焦点记号。
怎么研究
只用键盘把焦点走到每类背景上截图：浅页、深页、主按钮、幽灵按钮、图上的文字链、选中表行。对环的外缘与紧邻像素测对比。开系统「增强对比 / 强制颜色」再走一遍。
自变量：指示样式（单色细环 / 双色环 / 内描边）、背景类型。 因变量：能否指出焦点在哪、环-底对比、在哪类背景上丢失。
不要用鼠标点击代替：点击可能走 :focus 又立刻被样式藏掉，和 Tab 看到的不是同一态。
边界
指针操作后不显示焦点、键盘操作后显示，这是合法分工，前提是键盘路径上的环仍在所有底上可辨。自定义控件没有原生 outline 时，这条更硬，因为浏览器不会代画。被粘滞栏挡住的焦点是另一类「看不见」，环本身可能足够亮。画布、地图内部的自绘焦点要在自绘层里做，CSS 环画不到像素里。
怎么落地
- 用双色或内外两圈，而不是一条只在白底上调过的品牌色。
- 环要有足够厚度，不要靠 1 px 抗锯齿。
- 在主色按钮、反相按钮、图上链接上各留一帧焦点截图，当作验收素材，而不是只验收浅灰页面。
- 验证：藏起指针，Tab 走完一页。任何一停你要靠猜才知道在哪，就换指示或换那块底。把同一路径放到深色和高对比下再走，丢失的停记为缺陷。