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
可以在左边的调色盘设置背景色，右边的调色盘设置前景色，中间的数值会给你一个计算后的对比度，通常的设计规则是深色的背景色就要搭配浅色的前景色，而浅色的前景色就要搭配深色的背景色。
网站的效果通常是由设计师设计的，有些没有经验的设计师给出的设计让人一看就非常难受。这里的难受我们通常是感性的认识，把他的配色放入到工具里你就可以有理有据的说出他的设计比较难受的原因了。