Contrasting Color

简介

输出与输入颜色对比的颜色。

UI 设计中的一项常见任务是为文本或图标选择与背景色足够对比的颜色，以确保清晰可读。Contrasting Color Utility 可用于自动化此过程，并确保符合最新的 WCAG 可访问性标准。

UI

Mode - 设置对比度比率以测试 Input Color 与 Primary Color：

• Most Contrasting - 输出与 Input Color 对比最强的颜色（Primary 或 Secondary）。
• Least Contrasting - 输出与 Input Color 对比最弱的颜色（Primary 或 Secondary）。
• 3:1 - 最低限度级别。也称为 A 级别（基本合规）。
• 4.5:1 - 对大多数用户可用且可访问。也称为 AA 级别（可接受的合规）。
• 7:1 - 黄金标准级别的可访问性。也称为 AAA 级别（最佳合规）。
• Custom - 设置自定义 Custom Ratio。

Custom Ratio - 设置自定义比率 [value]:1。

Input Color - 设置要与 Primary Color 进行测试的颜色。通常是文本或图标的颜色。

Primary Color - 设置要与 Input Color 进行测试的颜色。如果对比度比率测试通过，则输出此颜色。

Secondary Color - 设置当 Primary Color 未通过对比度比率测试时输出的替代颜色。

1. 创建一个 Rectangle。
2. 创建一个 Ellipse：
   • 设置 Radius 为 70。
   • 禁用 Fill。
   • 启用 Stroke。
3. 将 Rectangle 和 Ellipse Group 组合。
4. 选中 Group，点击 Shelf 中的 Duplicator 图标。
5. 设置 Duplicator 的 Grid Size（Width 和 Height）为 500。
6. 创建一个 Color Array。
7. 使用 Add 按钮，添加 3 个更多索引，并为每个设置不同的颜色。确保颜色混合浅色和深色。
8. 连接 colorArray.id→rectangle.fill.color。
9. 创建一个 Contrasting Color Utility。
10. 连接 colorArray.id→contrastingColor.inputColor。
11. 连接 contrastingColor.id→ellipse.stroke.color。

位于浅色矩形上的椭圆的 Stroke 颜色应设为 Primary Color，反之亦然。

最佳实践是选择彼此对比的 Primary 和 Secondary 颜色，以确保当一个未通过时，另一个更有可能具有足够的对比度来保持清晰可读。