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

2024-03-04 02:30

本文主要是介绍文字背景对比度contrast ratio的计算公式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

对比度标准

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

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

为什么基于亮度计算?

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

对比度等级

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

  • A 级 (采用3:1的对比度,是普通观察者可接受的最低对比度)

  • AA 级(采用4.5:1 的对比度,是普通视力损失的人可接受的最低对比度)

  • AAA 级(采用7:1的对比度,是严重视力损失的人可接受的最低对比度)

计算两个颜色的对比度

luminanace(r, g, b) {var a = [r, g, b].map(function (v) {v /= 255;return v <= 0.03928? v / 12.92: Math.pow((v + 0.055) / 1.055, 2.4);});return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
},
contrast(rgb1, rgb2) {// hex to rgbvar result1 = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(rgb1);var result2 = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(rgb2);var rgb1Obj = result1 ? {r: parseInt(result1[1], 16),g: parseInt(result1[2], 16),b: parseInt(result1[3], 16)} : null;var rgb2Obj = result2 ? {r: parseInt(result2[1], 16),g: parseInt(result2[2], 16),b: parseInt(result2[3], 16)} : null;var lum1 = this.luminanace(rgb1Obj.r, rgb1Obj.g, rgb1Obj.b);var lum2 = this.luminanace(rgb2Obj.r, rgb2Obj.g, rgb2Obj.b);// 亮色 / 暗色var brightest = Math.max(lum1, lum2);var darkest = Math.min(lum1, lum2);return (brightest + 0.05) / (darkest + 0.05);
}console.log('contrast>>>>>>',this.contrast('#ffffff', '#ffff00') ); // 1.0738392309265699

参考文档

  • https://www.zhangxinxu.com/wordpress/2018/11/css-background-color-font-auto-match/

  • http://www.xueui.cn/experience/app-experience/selection-of-contrast-between-text-and-background.html

  • https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors

这篇关于文字背景对比度contrast ratio的计算公式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/771734

相关文章

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只

第49课 Scratch入门篇:骇客任务背景特效

骇客任务背景特效 故事背景:   骇客帝国特色背景在黑色中慢慢滚动着! 程序原理:  1 、 角色的设计技巧  2 、克隆体的应用及特效的使用 开始编程   1、使用 黑色的背景: ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d74c872f06b4d9fbc88aecee634b074.png#pic_center)   2

数据中台出现的背景

数据中台产生背景 数据建设中出现的问题 在企业数据建设过程中,都离不开大数据平台建设,大数据平台建设涉及数据采集、数据存储、数据仓库构建、数据处理分析、数据挖掘、数据可视化等一系列流程。 随着企业体量不断增大,一个企业可能有总公司及很多子公司,随着企业各类业务多元化和垂直业务发展,从全企业角度来看,每个子公司或者某些独立的业务部都在构建大数据分析平台,在企业内部形成了很多分散、烟囱式、独立的

PNG透明背景按钮的实现(MFC)

问题描述: 当前要在对话框上添加一个以两个PNG图片作为背景的按钮,PNG图的背景是透明的,按钮也要做出相同的透明效果。并且鼠标不在按钮上时,按钮显示"bg1.png";鼠标移动到按钮上时,按钮显示"bg2.png" 开发环境为VS2010。 解决办法: 使用GDI+库装载PNG图片,并使用MFC Button Control和CMFCButton类结合,调用CMFCButton

Winfrom中解决图像、文字模糊的方法

1.添加清单 2.将清单中的下面内容取消注释

【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程酒吧一群美女车展模特大屏幕视频改字AE模板修改文字特效广软件告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 安装AE软件 下载AE模板 把AE模板导入AE软件 修改图片或文字 渲染出视频

ORA-01861:文字与格式字符串不匹配

select t.*, t.rowid from log_jk_dtl t; insert into log_jk_dtl (rq,zy,kssj,jssj,memo)  values (to_date(sysdate,'yyyy-mm-dd'),'插入供应商', to_char(sysdate,'hh24:mi:ss'),to_char(sysdate,'hh24:mi:ss'),'备注'

AIGC大模型智能抠图(清除背景):Sanster/IOPaint,python(2)

AIGC大模型智能抠图(清除背景):Sanster/IOPaint,python(2)   在文章(1)的基础上,尝试用大模型扣除图中的某些主要景物。 1、首先,安装插件: pip install rembg   2、第1步安装成功,启动webui,注意,这里要启用清除背景/抠图的插件 --enable-remove-bg : iopaint start --model=lama

【python】Python中如何通过rembg实现图片背景去除

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,PyQt5和Tkinter桌面开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Dj

【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程豪车劳斯莱斯库里南中控改名软件AE模板修改文字特效广告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 下载AE模板 安装AE软件 把AE模板导入AE软件 修改图片或文字 渲染出视频