文字与背景间对比度的选择

对比度的选择

WCAG 2.0 中将颜色对比等级分为 3 种:

  • A 级:采用 3:1 的对比度,是普通观察者可接受的最低对比度。字号大,字重高的文字在较低的对比度下也易于阅读,这时就可以选择 3:1 的对比度。
  • AA 级:采用 4.5:1 的对比度,是普通视力损失的人可接受的最低对比度。这个数据来自 80 岁老人的典型视力。
  • AAA 级:采用 7:1 的对比度,是严重视力损失的人可接受的最低对比度,超出这种视力损伤的用户就需要借助辅助技术帮助其进行信息识别了,所以不再考虑范围内。

等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。

所以 MD 就是根据这 3 个颜色对比等级得出:对比度最低不小于 4.5:1,最佳对比度是 7:1,这样才可以保证最大的用户群体对内容进行识别。

文字与背景间对比度的选择

计算方式

可以使用 contrast-ratio 快速获取对比度的数值:

快速获取对比度

See also

Previous
Next