当前位置：首页 > news >正文

【CSS in Depth 2 精译_071】11.4 思考字体颜色的对比效果 + 11.5 本章小结

news 文章来源：https://blog.csdn.net/frgod/article/details/144334825 2025/1/12 20:39:03

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第四部分视觉增强技术 ✔️
【第 11 章颜色与对比】 ✔️
11.1 通过对比进行交流
11.1.1 模式的建立
11.1.2 还原设计稿

11.2 颜色的定义
11.2.1 色域与色彩空间
11.2.2 CSS 颜色表示法
11.2.2.1 RGB 与十六进制颜色
11.2.2.2 HSL 颜色表示法
11.2.2.3 HWB 颜色表示法
11.2.2.4 新一代色彩空间
11.2.2.5 LAB 和 OKLAB 颜色表示法
11.2.2.6 LCH 和 OKLCH 颜色表示法

11.3 利用 OKLCH 处理颜色（上篇）
11.3.1 把样式表切换到 OKLCH 色彩空间（上篇）
11.3.2 颜色变量的命名（上篇）
11.3.3 为调色板选取新的颜色（上篇）
11.3.4 从页面其他颜色衍生出新颜色（下篇）
11.3.4.1 使用拾色器（下篇）
11.3.4.2 使用 color-mix() 进行颜色混合（下篇）
13.3.4.3 定义相对颜色（下篇）

11.4 思考字体颜色的对比效果 ✔️
11.5 本章小结 ✔️

文章目录

- 11.4 思考字体颜色的对比效果 Considering contrast for font colors
- 11.5 本章小结 Summary

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译注
本篇为新版第 11 章的最后一节内容，介绍了一些与字体对比度相关的知识点。趁热打铁就一齐翻译了。当中提到的小工具还蛮有意思的，推荐大家都试试。学完本节内容最好再回顾一下本章的重点知识，以加深印象。夯实基础阶段，最忌心浮气躁。

11.4 思考字体颜色的对比效果 Considering contrast for font colors

您可能已经注意到了，示例页中的字体颜色都是深灰色的，而非纯黑色（true black）。从 OKLCH 颜色值可以看出，该字体颜色的亮度为 26%，而不是 0%。使用灰色而非纯黑色是业内通行做法。在背光式的电脑显示器上，纯白色背景下的纯黑色文本会产生强烈的对比效果，很容易在阅读时引起视觉疲劳，特别是大段的文本。而黑底白字也会面临同样的问题。在这种情况下，要么用深灰色代替黑色，要么用浅灰色代替白色，或者都替换掉。这在用户看来仍旧是黑白分明，但阅读时会感觉更舒适。

我们不想让文本产生过于强烈的对比效果，同样也不希望对比效果太差。浅灰色背景上的灰色文本同样难以阅读，甚至会让用户的视力受损。这与在强光下翻看智能手机是同一个道理。那么，我们究竟该如何实现恰当的对比效果呢？

为此，W3C 的 Web 内容无障碍指南（Web Content Accessibility Guidelines，即 WCAG） 提供了最低推荐对比度（也称为 level AA，即 AA 级推荐标准），以及更为严格的加强型对比度（也称为 level AAA，即 AAA 级推荐标准）。这两个级别都对大号文本的对比度适当放宽了限制。表 11.1 列出了推荐的对比度情况。

表 11.1 WCAG 文本对比度建议

	Level AA AA 级	Level AAA AAA 级
普通文本	`4.5 : 1`	`7 : 1`
大号文本	`3 : 1`	`4.5 : 1`

WCAG 规范对大号文本的定义为：未加粗的、字体大小为 18pt（即 24px）及以上的文本；或者加粗的、字体大小为 14pt（即 18.667px）及以上的文本。也就是说，正文字体应该达到或者超出普通文本推荐的对比度；标题文本则应该达到或者超出大号文本推荐的对比度。同时 WCAG 规范还就对比度和一些设计元素（如界面组件、图形等）给出了指导意见。

WCAG 甚至还提供了一个计算对比度的公式，但我从来不操心相关的数学运算。利用现成的工具来替我运算要简单得多。

线上就有很多这样的工具，检索关键词 “CSS color contrast checker”（即 “CSS 颜色对比检查工具”）即可。每个工具都各有优劣，我比较喜欢的一款是 OddContrast（详见：https://www.oddcontrast.com）。该检查工具支持所有的 CSS 颜色格式，只需输入背景色和文本颜色，就能轻松计算出相应的对比度（甚至还会将数值转换为当前选定的格式），运行结果如图 11.18 所示。

图 11.18 利用背景颜色与文本颜色算得的对比度为 15.6:1

【图 11.18 利用背景颜色与文本颜色算得的对比度为 15.6:1】

需要注意的是，众多设计图中，并不见得每一处文字都得达到 AAA 级对比度标准，WCAG 给出的建议里也提到了这一点。一个比较理想的处理方案是让主体文字达到 AAA 级标准、而对于那些彩色标签或者其他修饰性文字来说，则可以适当随意一些，达到 AA 级标准即可。

此外还需注意，并不是通过了数学计算就高枕无忧了，因为某些字体的可读性可能并不那么强，尤其是在设计中引入了纤细版字体时。图 11.19 展示了同一段文字的两个不同版本。虽然两个版本都用了相同的颜色，但肉眼感知到的对比度是截然不同的。

图 11.19 即便字体颜色相同，使用纤细版字体也会导致视觉上的对比度不足

【图 11.19 即便字体颜色相同，使用纤细版字体也会导致视觉上的对比度不足】

如图 11.19 所示，两个段落虽然都使用了 Helvetica Neue 字体，但左侧左侧段落设置的文字粗细为 400（normal，即常规粗细），而右侧段落则为 100（thin，即纤细）。此时 7:1 的对比度对于左侧文字而言已经很好了，但是对于右侧文字来讲对比度则明显不足，可能需要再调高些。

提示

只有部分字体提供了对应的纤细版本，使用时为了确保较好的可读性，一定记得设置强烈的颜色对比效果。

另外，请保留本章刚开始创建的示例页。下一章我将为您演示具体的页面构建方法，并重点关注设计元素间的精确间距设置，以及网络字体的添加方法。

11.5 本章小结 Summary

视觉对比可以用于吸引用户关注页面上的重要内容。
除了传统的十六进制、rgb() 及 hsl() 方法外，以 oklch()、oklab() 等为代表的现代颜色语法还可以定义出色域更加宽广的色彩。
浏览器会将超出正常色域渲染能力范围的颜色作近似处理，并归入当前硬件上最接近的颜色来进行展示。
HSL 与 OKLCH 都是圆柱形色彩空间，可以让色彩处理更加简单、一目了然。
利用 color-mix() 函数可将两种颜色混合在一起，从而生成第三种中间色。
将颜色值赋给构建策略保持一致的自定义属性，可以更方便地在整个网站中使用这些颜色，并且可以很轻松地按需补充调色板缺少的新颜色。

关于《CSS in Depth》（中译本书名《深入解析 CSS》）

	第 1 版	第 2 版
读者评分	原版：4.7（亚马逊）；中文版：9.3（豆瓣）	原版：5.0（亚马逊）；中文版：暂无，待出版
出版时间	原版：2018 年 3 月；中文版：2020 年 4 月	原版：2024 年 7 月；中文版：暂无，待出版
原价	原版：$44.99；中文版：￥139.00	原版：$59.99；中文版：暂无，待出版
现价	原版：$36.49；中文版：￥52.54 起步	原版：$52.09；中文版：暂无，待出版
原版国内预订	起步价￥461.00	起步价￥750.00

本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！

目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：

第一章层叠、优先级与继承（已完结）
1.1 层叠
1.2 继承
1.3 特殊值
1.4 简写属性
1.5 CSS 渐进式增强技术
1.6 本章小结

第二章相对单位（已完结）
2.1 相对单位的威力
2.2 em 与 rem
2.3 告别像素思维
2.4 视口的相对单位
2.5 无单位的数值与行高
2.6 自定义属性
2.7 本章小结

第三章文档流与盒模型（已完结）
3.1 常规文档流
3.2 盒模型
3.3 元素的高度
3.4 负的外边距
3.5 外边距折叠
3.6 容器内的元素间距问题
3.7 本章小结

第四章 Flexbox 布局（已完结）
4.1 Flexbox 布局原理
4.2 弹性子元素的大小
4.3 弹性布局的方向
4.4 对齐、间距等细节处
4.5 本章小结

第五章网格布局（已完结）
5.1 构建基础网格
5.2 网格结构剖析（上）
5.2.1 网格线的编号（下）
5.2.2 网格与 Flexbox 配合（下）

5.3 两种替代语法
5.3.1 命名网格线
5.3.2 命名网格区域

5.4 显式网格与隐式网格（上）
5.4.1 添加变化（中）
5.4.2 让网格元素填满网格轨道（下）

5.5 子网格（全新增补内容）
5.6 对齐相关的属性
5.7 本章小结

第六章定位与堆叠上下文（已完结）
6.1 固定定位
6.1.1 创建一个固定定位的模态对话框
6.1.2 在模态对话框打开时防止屏幕滚动
6.1.3 控制定位元素的大小

6.2 绝对定位
6.2.1 关闭按钮的绝对定位
6.2.2 伪元素的定位问题

6.3 相对定位
6.3.1 创建下拉菜单（上）
6.3.2 创建 CSS 三角形（下）

6.4 堆叠上下文与 z-index
6.4.1 理解渲染过程与堆叠顺序（上）
6.4.2 用 z-index 控制堆叠顺序（上）
6.4.3 深入理解堆叠上下文（下）

6.5 粘性定位
6.6 本章小结

第七章响应式设计（已完结）
7.1 移动端优先设计原则（上篇）
7.1.1 创建移动端菜单（下篇）
7.1.2 给视口添加 meta 标签（下篇）

7.2 媒体查询（上篇）
7.2.1 深入理解媒体查询的类型（上篇）
7.2.2 页面断点的添加（中篇）
7.2.3 响应式列的添加（下篇）

7.3 流式布局
7.4 响应式图片
7.5 本章小结

第八章层叠图层及其嵌套
8.1 用 layer 图层来操控层叠规则（上篇）
8.1.1 图层的定义（上篇）
8.1.2 图层的顺序与优先级（下篇）
8.1.3 revert-layer 关键字（下篇）

8.2 层叠图层的推荐组织方案
8.3 伪类 :is() 和 :where() 的用法
8.4 CSS 嵌套的使用
8.4.1 嵌套选择器的使用
8.4.2 深入理解嵌套选择器
8.4.3 媒体查询及其他 @规则的嵌套

8.5 本章小结

第九章 CSS 的模块化与作用域
9.1 模块的定义
9.1.1 模块和全局样式
9.1.2 一个简单的 CSS 模块
9.1.3 模块的变体
9.1.4 多元素模块

9.2 将模块组合为更大的结构
9.2.1 模块中多个职责的拆分
9.2.2 模块的命名

9.3 CSS 的作用域
9.3.1 CSS 作用域的就近原则
9.3.2 划定作用域的边界
9.3.3 CSS 中的隐式作用域
9.3.4 关于 CSS 作用域与层叠图层

9.4 CSS 模式库
9.5 本章小结

第十章 CSS 容器查询
10.1 容器查询的一个简单示例
10.1.1 容器尺寸查询的用法

10.2 深入理解容器
10.2.1 容器的类型
10.2.2 容器的名称
10.2.3 容器与模块化 CSS

10.3 与容器相关的单位
10.4 容器样式查询的用法
10.4.1 将模块与所在容器解耦
10.4.2 减少重复代码

10.5 本章小结

附录
附录A：CSS 选择器参考
附录B：CSS 预处理器简介

文章目录

11.4 思考字体颜色的对比效果 Considering contrast for font colors

11.5 本章小结 Summary

相关文章：