跳到主要内容

Contrast 对比度

面设计中不同颜色、图形、文本等元素之间的对比程度。对比度的高低影响着用户对界面元素的辨识和理解,因此在无障碍设计中,合适的对比度是非常重要的。


按照 W3C 对比度的定义,对比度范围为 1-21。

对比度表示两种颜色的明度之间的差异程度,通常写为 1:1 或 21:1。两个数之间的比值越高,颜色之间的相对明度的差异就越大。

推荐
慎用

W3C 推荐在正文文本和图片中使用以下对比度:小文本和它的背景色之间至少有 4.5:1 的对比度,大文本(大于 18pt 或 14pt 加粗)和它的背景色之间至少有 3:1 的对比度。

推荐
慎用

计算方法

计算对比度的方法通常是比较两种颜色的亮度值,其中一种颜色是文本或元素的颜色,另一种颜色是背景颜色。

对比度可以用数学公式计算,通常使用的公式为 (L1 + 0.05) / (L2 + 0.05),其中 L1 是文本颜色的相对亮度,L2 是背景颜色的相对亮度。

设计实践

为了确保界面上的对比度满足无障碍设计的要求,设计师可以使用一些工具来检查对比度。

例如,可以使用在线对比度检查器或浏览器插件(如 WebAIM Contrast Checker、Color Safe 等)来检查文本和背景之间的对比度。

在设计界面时,设计师应该选择高对比度的颜色组合,并确保文本颜色与背景颜色有足够的对比度。

此外,设计师还可以使用大小、粗细、间距等技巧来增加文本的可读性。