CSS中的背景色和前景色

news/2024/11/6 7:11:29 标签: 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.niftyadmin.cn/n/5740543.html

相关文章

[C++]——哈希(附源码)

目录 ​编辑 ​编辑 一、前言 二、正文 2.1 unorder系列关联式容器 2.1.1 unordered_map 2.1.1.1 unorderer_map的介绍 ①unordered_map的构造 ②unordered_map的容量 ③unordered_map的迭代器 ④unordered_map的元素访问 ⑤unordered_map的查询 ⑥unordered_map的修改操…

写文件回前端进行下载,报错:原因:CORS 头缺少 ‘Access-Control-Allow-Origin‘)

后端写文件返回前端&#xff0c;出现该错误。 解决 设置允许跨域 response.setHeader("Access-Control-Allow-Origin", "*"); 代码 后端 public void exportTemplate(HttpServletResponse response) { ArrayList<ActiveGifts> activeGifts new…

面试总结!

OSI七层模型&#xff1a; 什么是OSI七层模型&#xff1f; 我们需要了解互联网的本质是一系列的网络协议&#xff0c;这个协议就叫做OSI协议&#xff08;开放系统互联(Open System Interconnection&#xff09;&#xff09;&#xff0c;它是由ISO&#xff08;国际标准化组织&…

给初学者的 Jupyter Notebook 教程

目录 一、什么是Jupyter Notebook&#xff1f; 1. 简介 2. 组成部分 ① 网页应用 ② 文档 3. Jupyter Notebook的主要特点 二、安装Jupyter Notebook 0. 先试用&#xff0c;再决定 1. 安装 ① 安装前提 ② 使用Anaconda安装 ③ 使用pip命令安装 三、运行Jupyter No…

商务礼仪与职场沟通

知人者智&#xff0c;自知者明。胜人者有力&#xff0c;自胜者强。知足者富&#xff0c;强行者有志&#xff0c;不失其所者久&#xff0c;死而不亡者寿。 ——《道德经&#xff08;第三十三章&#xff09;》 认知先行——意识塑造 职业化——标准化&#xff0c;规范化&#…

(十三)JavaWeb后端开发——MySQL2

目录 1.DQL数据查询语言 1.1基本查询 1.2条件查询 where关键字 1.3分组查询 1.4排序查询 1.5分页查询 2.多表设计 3.多表查询——联查 4.多表查询——子查询​ 5.MySQL 事务 6.MySQL 索引 1.DQL数据查询语言 分为五大基本查询语法 1.1基本查询 -- 查询特定字段 s…

JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习

先简单记录下简单使用跟测试&#xff0c;后续再补充具体&#xff0c;最近有用到&#xff0c;简单来说就是后端(服务端)编写个发射器&#xff0c;实现一次请求&#xff0c;一直向前端客户端发射数据&#xff0c;直到发射器执行完毕&#xff0c;模拟ai一句一句回复的效果 Respon…

语音识别ic赋能烤箱,离线对话操控,引领智能厨房新体验

一、智能烤箱产品的行业背景 随着科技的飞速发展&#xff0c;智能家居已经成为现代家庭的新宠。智能烤箱作为智能家居的重要组成部分&#xff0c;正逐渐从高端市场走向普通家庭。消费者对于烤箱的需求不再仅仅局限于基本的烘焙功能&#xff0c;而是更加注重其智能化、便捷化和…