跳至主要内容
What's New


良好作业模式1.7 – 提供足够的颜色对比度 (基础级别)


在视觉呈现的网页内容与其背景颜色之间应有适当的对比度,至少:

  • 文字文本为 4.5:1
  • 互动元素或图形物件 (对使用者有意思的) 为 3:1

其背景使内容易于阅读

 

场景1

修正前 修正后
流动应用程式的按钮「繁体中文」及未勾选状态的切换按钮「讲座」、「工作坊」与背景的颜色对比度欠佳,有碍阅览。 在显示颜色对比度提高后,按钮文字及切换按钮更易于阅览。
在以上示例中,按钮「繁体中文」及未勾选状态的切换按钮「讲座」、「工作坊」与背景的颜色对比度欠佳,有碍阅览。 颜色对比度提高后,按钮文字及切换按钮更易于阅览。网上提供了各种检测颜色对比的工具,可协助流动应用程式开发人员进行颜色对比度测试。

场景2

修正前 修正后
在启用深色模式后没有足够的对比度,导致阅读困难。 修正对比度后,方便使用者阅读。
启用深色模式后,标题文字、按钮文字与背景没有足够的对比度,导致阅读困难。 修正后,标题文字和按钮文字可以方便使用者阅读。

 

W3C WCAG 参考: 1.4.3 对比度 (最低)1.4.11 非文字对比