当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第四部分 视觉增强技术 ✔️
- 【第 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》新版封面
译注
本篇为新版第 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】
需要注意的是，众多设计图中，并不见得每一处文字都得达到 AAA 级对比度标准，WCAG 给出的建议里也提到了这一点。一个比较理想的处理方案是让主体文字达到 AAA 级标准、而对于那些彩色标签或者其他修饰性文字来说，则可以适当随意一些，达到 AA 级标准即可。
此外还需注意，并不是通过了数学计算就高枕无忧了，因为某些字体的可读性可能并不那么强，尤其是在设计中引入了纤细版字体时。图 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 预处理器简介
