技术C40：创建双色聚焦指示器，确保与所有组件有足够的对比度
描述
此技术的目标是创建一个双色聚焦指示器，该指示器具有与任何纯色背景形成足够的对比度。这种技术可以避免需要多个类以确保焦点指示器在以下情况下具有足够的对比度从不同的背景来看。
作者可以将此技术应用于使用各种不同颜色的网站背景。虽然可以创建不同颜色的焦点指示器对于页面的不同部分，这可能很耗时，而且很容易忽略一些组件。但是，如果焦点指示器使用两种高度对比的颜色-浅色和深色-然后可以重新使用相同的指示器，因为这两种颜色中至少有一种与任何背景都有足够的对比度颜色。
只要两种指示颜色的对比度至少为9:1另一方面，这两种颜色中至少有一种可以保证与任何颜色形成3:1的对比度纯色背景。
此技术仅保证当整个指示器在背景上绘制，而不是在聚焦组件的边界内，并且如果指示器后面的整个背景是单一的纯色。例如，如果背景是图像或渐变色，或者指示器部分重叠在不同UI组件之上，可能仍然需要比较指示器逐像素对比背景。
在CSS中，可以通过组合概述和盒子阴影属性和：焦点或：焦点可见伪类。
避免设置大纲：无使用盒子阴影独立完成。用户代理通常会禁止盒子阴影属性，因此作者应避免依赖盒子阴影单独实施重点指标。如果盒子阴影只需要样式，请考虑将其与轮廓：2px透明固体属性以确保与强制颜色模式兼容。
示例
此示例演示了一个简单的实现，其中焦点样式应用于所有可聚焦组件。在更复杂的网站上使用时，需要注意这些样式不会被更具体的样式覆盖。
示例1：厚双色指示器
在本例中，指示器由两个纯色带组成。因为每个色带为2个CSS像素厚，任何一个色带都足以满足最小值指示器本身的尺寸要求。只要两种颜色中的一种有3:1的变化与焦点指示器后面和周围的像素相比，指示器将满足焦点外观和非文本对比成功标准。
*：焦点{/*内部指示器*/轮廓：2px#F9F9F9实心；outline-offset：0；/*外部指示器*/方框阴影：0 0 0 4px#193146；}
厚双色指示器的工作示例
测验
程序
对于每个可聚焦的用户界面组件：
- 检查焦点指示器中的两种颜色的对比度是否为9:1或更大。
- 检查每个色带是否至少有2个CSS像素厚。
- 检查指示器一次只显示在一个纯色背景上。
返回页首