文字背景对比度contrast ratio的计算公式

最新推荐文章于 2024-07-17 15:03:19 发布

前端队长

最新推荐文章于 2024-07-17 15:03:19 发布

阅读量1.3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lvonve/article/details/115067259

版权

根据MD规范，文本对比度至少要达到4.5:1以保证清晰度。对比度是通过两个颜色的亮度值相除得出，例如白色与黑色的对比度为21:1。WCAG 2.0定义了A、AA、AAA三个对比度等级，分别对应不同的视觉需求。要计算颜色对比度，可以参考相关文档。

摘要由CSDN通过智能技术生成

MD规范里说：文本应该保持至少 4.5:1 （基于亮度值计算）的对比度以保持文本清晰；最佳对比度为 7:1。

对比度的计算规则我们可以简单的理解为两个颜色的相对亮度相除得到的值，比如：两个白色的对比度是 1:1 , 白色（#FFFFFF）与黑色（#000000）的对比度为 21:1，也就是说对比度的范围在 1:1 与 21:1 之间。

“

为什么基于亮度计算？

W3C (万维网联盟)中提到，对没有颜色缺陷的人进行阅读性能评估，发现色调和饱和度对易读性的影响很小或者是没有影响，而亮度对比度对易读性的影响很大。所以，颜色差别不是关键，即使对色弱的人，只要有足够的亮度对比度就不会影响阅读。

WCAG 2.0 中将颜色对比等级分为3种，A级，AA级，AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大：

luminanace(r, g, b) {
   
    var a = [r, g, b].map(function (v) {
   
        v /= 255;
        return v <= 0.03928

关注

专栏目录