WCAG 色彩对比指南
了解 AA 和 AAA 对比度要求、如何测试文本和 UI 组件以及如何修复失败的对。
FAQ
- 我需要多少比例的按钮？
- UI 组件和图形对象通常需要与相邻颜色至少 3:1。按钮内的文本仍需要 4.5:1 (AA) 或 3:1（对于大文本）。
WCAG 对比基础知识
WCAG 2.x 定义文本和背景颜色之间的最小对比度。 AA级是共同的法律和产品目标； AAA 更为严格，如果可能，建议将其用于正文。
对比度基于相对亮度，而不是色调。如果两种颜色的亮度太相似，它们可能看起来不同，但无法形成对比。
测试工作流程
从您的设计系统中选择前景色和背景色。通过对比检查器运行它们。注意正常文本阈值与大文本阈值。
测试悬停、焦点和禁用状态 - 不仅仅是默认按钮和链接。