CSS Color contrast

原创
admin 4个月前 (08-23) 阅读数 29 #CSS

色彩对比度

背景与前景内容(通常是文本)之间的色彩对比度应足够高,以确保可读性。

当为不同的视觉能力设计可读界面时,WCAG指南推荐以下对比度比例:

内容类型 最低比例(AA评级) 增强比例(AAA评级)
正文文本 4.5 : 1 7 : 1
大号文本(比正文大120-150%) 3 : 1 4.5 : 1
活动用户界面组件和图形对象,如图标和图表 3 : 1 未定义

这些比例不适用于"偶然"文本,如非活动控件、标志或纯装饰性文本。

有关更多信息,请参阅下方的解决方案部分。

在您的网站上保持良好的色彩对比度对所有用户都有益,但对于某些类型的色盲和其他类似状况的用户尤其有益,他们经历低对比度,难以区分相似颜色。这是因为他们不像没有这些状况的人那样容易看到明亮和黑暗的区域,因此难以看到边缘、边框和其他细节。

在您的网站上拥有酷炫的设计很好,但如果您的用户无法阅读您的内容,那么设计就毫无价值。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。

作者文章
热门
最新文章
标签列表