CSS中的背景色和前景色

目录

  • 1 对比度的计算
    • 1.1 亮度计算
    • 1.2 对比度比率
  • 2 在线计算对比度

在我们的样式设计中,通常会有背景色和前景色的概念。前景色我们通常用来设置文本的颜色,而背景色通常是文本的所在容器的颜色。比如如果我们把文本放在普通容器里,那普通容器就需要设置背景色,而文本可以设置前景色。

前景色的样式用color表示,而背景色用background-color设置。一般需要设置符合人类阅读习惯的对比度的颜色,有如下定义:

1 对比度的计算

对比度通常使用以下公式计算:

1.1 亮度计算

首先,需要计算前景色和背景色的相对亮度。相对亮度的计算公式如下:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B L = 0.2126 \times R + 0.7152 \times G + 0.0722 \times B L=0.2126×R+0.7152×G+0.0722×B
其中,R、G、B 是颜色的红、绿、蓝分量,取值范围为 0 到 255。计算时需要将 RGB 值归一化到 0 到 1 的范围:
R ′ = R 255 , G ′ = G 255 , B ′ = B 255 R' = \frac{R}{255}, \quad G' = \frac{G}{255}, \quad B' = \frac{B}{255} R=255R,G=255G,B=255B
然后,计算相对亮度:
L = 0.2126 × R ′ + 0.7152 × G ′ + 0.0722 × B ′ L = 0.2126 \times R' + 0.7152 \times G' + 0.0722 \times B' L=0.2126×R+0.7152×G+0.0722×B

1.2 对比度比率

接下来,使用以下公式计算前景色和背景色之间的对比度比率:
对比度比率 = L 1 + 0.05 L 2 + 0.05 \text{对比度比率} = \frac{L_1 + 0.05}{L_2 + 0.05} 对比度比率=L2+0.05L1+0.05
其中 𝐿1是较亮颜色的相对亮度,𝐿2是较暗颜色的相对亮度。

根据 WCAG(Web Content Accessibility Guidelines)标准,正常文本的对比度比率应至少为 4.5:1,以确保良好的可读性。

2 在线计算对比度

我们可以通过在线工具来验证我们的前景色和背景色设计的是否合理

https://www.siegemedia.com/contrast-ratio#hsla%28200%2C0%25%2C0%25%2C.7%29-on-%233a4b3d

在这里插入图片描述
可以在左边的调色盘设置背景色,右边的调色盘设置前景色,中间的数值会给你一个计算后的对比度,通常的设计规则是深色的背景色就要搭配浅色的前景色,而浅色的前景色就要搭配深色的背景色。

网站的效果通常是由设计师设计的,有些没有经验的设计师给出的设计让人一看就非常难受。这里的难受我们通常是感性的认识,把他的配色放入到工具里你就可以有理有据的说出他的设计比较难受的原因了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/59327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mac上的一些实用工具

一、录屏工具 快捷键:commandshift5 退出时候重复上面的快捷键即可看到操作键。 二、如何启用虚拟化技术(VT) 1、检查VT支持情况 终端输入sysctl -a|grep machdep.cpu.features,如果输出结果包含VMX,则说明你的Mac支持VT 2、检查Hypervisor.frramew…

docker复现pytorch_cyclegan

1、安装docker 配置docker镜像 添加镜像源至docker engine 2、wsl2安装nvidia-docker 要在Ubuntu中安装NVIDIA Docker,需要满足以下条件: 确保主机已安装NVIDIA的CUDA驱动程序,并使用适用于您操作系统的正确版本。 wsl --update在Ubuntu…

全面解析:区块链技术及其应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 全面解析:区块链技术及其应用 全面解析:区块链技术及其应用 全面解析:区块链技术及其应用 区…

[Redis] Redis主从复制模式

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…

独孤思维:图书电商远程诊断,差点晕倒

01 刚才一个图书学员想让我远程诊断下。 主要问题是,他用批量工具遇到问题,无法获取批量数据。 我远程一看,差点晕倒。 连工具都用错了,当然无法批量获取。 我说你仔细再看下专栏内容。 真的服了。 所以为什么有些人做不起…

十四届蓝桥杯STEMA考试Python真题试卷第二套第二题

来源:十四届蓝桥杯STEMA考试Python真题试卷第二套编程第二题。虽然不建议,但是我们还是给出一行代码的实现,以展现Python的简洁。 题目描述: 空调遥控器上的模式按钮可控制四种模式的切换。空调的初始模式为制热模式,…

C02S10-Linux的进程和计划任务管理

一、进程 1. 相关概念 程序:没有运行的代码,是指令和规则的集合,定义了要执行和操作的任务。进程:正在运行的代码,是程序的执行实例。线程:是计算机进行运算的最小单位,是进程中实际允许的单位…

初始JavaEE篇——多线程(8):JUC的组件

找往期文章包括但不限于本期文章中不懂的知识点: 个人主页:我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏:JavaEE 目录 Callable接口 ReentrantLock synchronized 与 ReentrantLock的区别 信号量(Semaphore) CountDown…

C++ <string> 标头文件详解

目录 1. <string> 的基本介绍2. 创建和初始化字符串3. 字符串的基本操作3.1 连接字符串3.2 获取字符串长度3.3 访问和修改字符3.4 字符串比较 4. 常用字符串成员函数4.1 append()4.2 insert()4.3 erase()4.4 substr()4.5 find() 和 rfind()4.6 replace() 5. 字符串转换5.…

Java实现JWT登录认证

文章目录 什么是JWT?为什么需要令牌?如何实现?添加依赖&#xff1a;JwtUtils.java&#xff08;生成、解析Token的工具类&#xff09;jwt配置&#xff1a;登录业务逻辑&#xff1a;其他关联代码&#xff1a;测试&#xff1a; 什么是JWT? JWT&#xff08;Json Web Token&…

Meta AR 眼镜团队前负责人加入 OpenAI;visionOS 2.2 Beta 引入超宽屏投屏模式丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09;领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的数据」、「有思考的 文章 …

如何对LabVIEW软件进行性能评估?

对LabVIEW软件进行性能评估&#xff0c;可以从以下几个方面着手&#xff0c;通过定量与定性分析&#xff0c;全面了解软件在实际应用中的表现。这些评估方法适用于确保LabVIEW程序的运行效率、稳定性和可维护性。 一、响应时间和执行效率 时间戳测量&#xff1a;使用LabVIEW的时…

鸢尾博客项目开源

1.博客介绍 鸢尾博客是一个基于Spring BootVue3 TypeScript ViteJavaFx的客户端和服务器端的博客系统。项目采用前端与后端分离&#xff0c;支持移动端自适应&#xff0c;配有完备的前台和后台管理功能。后端使用Sa-Token进行权限管理,支持动态菜单权限&#xff0c;服务健康…

mysql中InnoDB索引与MyISAM索引

mysql索引 InnoDB 索引存储 主键索引&#xff08;聚簇索引&#xff09; 定义&#xff1a;主键索引是 InnoDB 存储引擎的聚簇索引&#xff0c;它决定了表中数据的物理存储顺序。每个 InnoDB 表都有一个且仅有一个聚簇索引。存储&#xff1a;主键索引的叶子节点直接包含表的数…

淘宝有哪些API是用来获取商品列表的?(商品id列表)

淘宝商品详情接口item_get是通过商品id或者商品链接来获取商品详情数据的&#xff0c;但是不少客户是没有商品id的&#xff0c;这时需要通过接口来拿到商品id。 可以获取商品id的API有&#xff1a; item_search 通过关键字搜索商品列表 item_search_shop 获取店铺所有商品列…

拾光云影 3.3.0 | 高清秒播电视直播,支持IPV4,几千频道

拾光云影是一款Ipv4通用版电视直播APP&#xff0c;界面熟悉但有所改进&#xff0c;操作布局类似TVbox。新增了功能按钮页&#xff0c;提供更多功能。频道清晰&#xff0c;加载速度快&#xff0c;支持港澳台等特殊频道&#xff0c;大部分频道均可秒播。软件内置了直播接口&#…

【HTML】——VSCode 基本使用入门和常见操作

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 零&#xff1a;HTML开发工具VSCode的使用 1&#xff1a;创建项目 2&#xff1a;创建格式模板&#x…

Redis数据库测试和缓存穿透、雪崩、击穿

Redis数据库测试实验 实验要求 1.新建一张user表&#xff0c;在表内插入10000条数据。 2.①通过jdbc查询这10000条数据&#xff0c;记录查询时间。 ②通过redis查询这10000条数据&#xff0c;记录查询时间。 3.①再次查询这一万条数据&#xff0c;要求根据年龄进行排序&#…

Pyecharts使用本地文件绘制美国地图

访问我的github仓库outer_resources中的USA.json文件: big_data_analysis/outer_resources/USA.json at main Just-A-Freshman/big_data_analysis 保存到当前目录下; 随后运行代码: from pyecharts import options as opts from pyecharts.charts import Map from pyechar…

学习党的二十大精神,推动科技创新和发展

党的二十大提出了“创新是引领发展的第一动力”的重要思想&#xff0c;这也是我一直以来坚持的理念。在工作中&#xff0c;注重培养自己的创新精神和实践能力&#xff0c;不断探索前沿科技&#xff0c;提高自己的工作能力和科技创新水平。 网络安全建设是保障国家能源安全、提升…