良好作业模式1.7 – 提供足够的颜色对比度 (基础级别)
在视觉呈现的网页内容与其背景颜色之间应有适当的对比度,至少:
- 文字文本为 4.5:1
- 互动元素或图形物件 (对使用者有意思的) 为 3:1
其背景使内容易于阅读
场景1
| 修正前 | 修正后 |
|---|---|
![]() |
![]() |
| 在以上示例中,按钮「繁体中文」及未勾选状态的切换按钮「讲座」、「工作坊」与背景的颜色对比度欠佳,有碍阅览。 | 颜色对比度提高后,按钮文字及切换按钮更易于阅览。网上提供了各种检测颜色对比的工具,可协助流动应用程式开发人员进行颜色对比度测试。 |
场景2
| 修正前 | 修正后 |
|---|---|
![]() |
![]() |
| 启用深色模式后,标题文字、按钮文字与背景没有足够的对比度,导致阅读困难。 | 修正后,标题文字和按钮文字可以方便使用者阅读。 |
W3C WCAG 参考: 1.4.3 对比度 (最低)、1.4.11 非文字对比
















































