网站建设需要材料,关于旅游案例的网站,佛山专业的免费建站,dw网页版当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第四部分 视觉增强技术 ✔️【第 11 章 颜色与对比】 ✔️ 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间11.2.2 CSS 颜色表示法 11.2.2.1 RGB… 当前内容所在位置可进入专栏查看其他译好的章节内容 第四部分 视觉增强技术 ✔️【第 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 colors11.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 : 17 : 1大号文本3 : 14.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 字体但左侧左侧段落设置的文字粗细为 400normal即常规粗细而右侧段落则为 100thin即纤细。此时 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 与 rem2.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 本章小结 附录 附录ACSS 选择器参考附录BCSS 预处理器简介
