【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 本章小结 ✔️

文章目录

    • 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 : 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

【图 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() 等为代表的现代颜色语法还可以定义出色域更加宽广的色彩。
  • 浏览器会将超出正常色域渲染能力范围的颜色作近似处理,并归入当前硬件上最接近的颜色来进行展示。
  • HSLOKLCH 都是圆柱形色彩空间,可以让色彩处理更加简单、一目了然。
  • 利用 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 预处理器简介

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63909.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL ON DUPLICATE KEY UPDATE影响行数

目录 分析为什么Updates返回7 总结 数据库更新日志如下 insertOrUpdateList|> Preparing: INSERT INTO clue_user_tag (vuid, tag_id, tag_type, content) VALUES (?, ?, ?, ?) , (?, ?, ?, ?) , (?, ?, ?, ?) , (?, ?, ?, ?) ON DUPLICATE KEY UPDATE …

spring cloud之Bus回顾

最开始学习Bus时&#xff0c;为了刷新Config配置&#xff0c;后面很少用了&#xff0c;发现这个它的用途很大的&#xff0c;spring cloud不是想进能进的。 server 下面这里其实就是重复了下Config-server流程&#xff0c;略有改动 1、pom <dependency><groupId>…

Java中的Stream

1. 什么是 Stream&#xff1f; Stream 是 Java 8 引入的一种新方式&#xff0c;目的是帮助我们更简洁、更高效地处理集合&#xff08;如 List、Set、Map 等&#xff09;。你可以把 Stream 想象成一条“流水线”&#xff0c;数据就像是流水线上的原材料&#xff0c;经过流水线的…

使用 Kubernetes 部署 Redis 主从及 Sentinel 高可用架构(未做共享存储版)

文章目录 使用 Kubernetes 部署 Redis 主从及 Sentinel 高可用架构Redis 主从架构部署 (1.yaml)Redis Sentinel 部署 (2.yaml)Sentinel 服务暴露 (3.yaml)部署步骤总结 使用 Kubernetes 部署 Redis 主从及 Sentinel 高可用架构 本文将详细介绍如何在 Kubernetes 中部署 Redis …

ElasticSearch常见的索引_集群的备份与恢复方案

方案一&#xff1a;使用Elasticsearch的快照和恢复功能进行备份和恢复。该方案适用于集群整体备份与迁移&#xff0c;包括全量、增量备份和恢复。 方案二&#xff1a;通过reindex操作在集群内或跨集群同步数据。该方案适用于相同集群但不同索引层面的迁移&#xff0c;或者跨集…

GauHuman阅读笔记【3D Human Modelling】

笔记目录 1. 基本信息2. 理解(个人初步理解,随时更改)3. 精读SummaryResearch Objective(s)Background / Problem StatementMethod(s)EvaluationConclusionReferences1. 基本信息 题目:GauHuman: Articulated Gaussian Splatting from Monocular Human Videos时间:2023.12…

onlyoffice 容器配置修改后制作镜像导出以及上传到 dockerhub

1.将容器制作成新的镜像 docker commit -p -a "xxx" -m "zh-cn-20-100" onlyoffice ooffice:7.1.1.23docker commit: 这是 Docker 中用于创建新镜像的命令。 -p: 这个选项用于在提交之前暂停容器的运行。这可以确保数据的完整性&#xff0c;因为容器在提交…

CentOS7环境安装php

直接安装 yum -y install php CentOS7默认安装是php5&#xff0c;现在php已有8.3版本 先查看php -v 版本 如果是低版本&#xff0c;可以删除 yum remove php yum remove php-fpm yum remove php-common 一、添加REMI存储库 yum install epel-release yum install -y …

ByteByteGo-Top 9 HTTP Request Methods 9种HTTP请求方法

更详细准确的描述直接参考 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/CONNECT ​​​​​本片文章出自 EP85: Top 9 HTTP Request Methods - ByteByteGo Newsletter http request methods 1&#xff0c;GET 从服务器获取资源。 具有幂等性&#xff08;idempo…

HarmonyOS:多线程并发-Worker

Worker主要作用是为应用程序提供一个多线程的运行环境&#xff0c;可满足应用程序在执行过程中与宿主线程分离&#xff0c;在后台线程中运行一个脚本进行耗时操作&#xff0c;极大避免类似于计算密集型或高延迟的任务阻塞宿主线程的运行。具体接口信息及使用方法详情请见Worker…

Linux 升级 openssh 方法步骤

目录 一&#xff1a;OpenSSH 介绍二&#xff1a;升级 OpenSSH1、下载源码包2、查看当前安装位置3、上传源码包4、生成Makefile文件5、编译并安装6、重启ssh服务7、检查版本信息 一&#xff1a;OpenSSH 介绍 OpenSSH最初是作为OpenBSD系统项目的一部分而开发的&#xff0c;后面…

ES语句——DSL(kibana语句)

一、查询操作 查看当前索引的数据结构 _mapping Get ai-open-log*/_mapping 查询当前索引下的文档数以及分片信息 _count Get ai-open-log*/_count { "count": 12345, //当前索引下的文档总数 "_shards": { //分片信息 "total&…

docker开启远程访问

1、编辑docker.server文件 vi /usr/lib/systemd/system/docker.service 找到 [Service] 节点&#xff0c;修改 ExecStart 属性&#xff0c;增加 -H tcp://0.0.0.0:2375 ExecStart/usr/bin/dockerd -H fd:// --containerd/run/containerd/containerd.sock -H tcp://0.0.0.0:2…

ubuntu检测是否已安装nvidia驱动以及产品类型

nvidia-sminvidia-smi 是 NVIDIA 提供的一个命令行工具&#xff0c;用于查看和管理 NVIDIA GPU 的状态。当你运行 nvidia-smi 命令时&#xff0c;它会显示当前系统中所有 NVIDIA GPU 的状态信息&#xff0c;包括 GPU 的使用率、温度、内存使用情况等。 有8个GPU nvcc -V查看c…

python的自动化seleium安装配置(包含谷歌的chromedriver)

目录 前言介绍 一、下载谷歌浏览器chromedriver (一)查看谷歌浏览器版本 (二)去官网下载谷歌驱动(chromdriver) (三)谷歌浏览器安装位置解压 (四)配置环境变量 二、pychram里下载安装selenium 三、测试selenium是否成功 前言介绍 Selenium是一个开源的自动化测试工具&…

基础学习:(5)不同卷积:transposed convolution,deconvolution,dilated convolution

基础学习&#xff1a;&#xff08;5&#xff09;不同卷积 文章目录 基础学习&#xff1a;&#xff08;5&#xff09;不同卷积前言1 deconvlution transposed convolution2 对比2.1 Convolution animations2.2 Transposed convolution animations2.3 Dilated convolution 前言 …

轻量级日志管理平台:Grafana Loki搭建及应用(详细篇)

前言 Grafana Loki是Grafana Lab团队提供的一个水平可扩展、高可用性、多租户的日志聚合系统&#xff0c;与其他日志系统不同的是&#xff0c;Loki最初设计的理念是为了为日志建立标签索引&#xff0c;而非将原日志内容进行索引。 现在目前成熟的方案基本上都是&#xff1a;L…

【java】在 Java 中使用 Jackson 或 Gson 库来实现对象和 JSON 之间的转换

1. 使用 Jackson 库 a. 将 Java 对象转为 JSON 字符串 import com.fasterxml.jackson.databind.ObjectMapper;public class Main {public static void main(String[] args) throws Exception {Person person new Person("John", 30);// 创建 ObjectMapper 对象Obj…

[漏洞挖掘与防护] 05.CVE-2018-12613:phpMyAdmin 4.8.1后台文件包含缺陷复现及防御措施

这是作者新开的一个专栏——“漏洞挖掘与防护”,前期会复现各种经典和最新漏洞,并总结防护技巧;后期尝试从零学习漏洞挖掘技术,包括Web漏洞和二进制及IOT相关漏洞,以及Fuzzing技术。新的征程,新的开启,漫漫长征路,偏向虎山行。享受过程,感谢您的陪伴,一起加油~ 欢迎关…

el-table行合并及合并后序号处理

效果图 <el-tableclass"ncky-detail-table"v-loading"tableLoading"border:data"tableDataVo":span-method"objectSpanMethod"row-key"uniqueFlag":row-class-name"tablerowclassname"><el-table-column…