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

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

• 第四部分 视觉增强技术 ✔️
• 【第 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 本章小结 ✔️

《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 预处理器简介