返回知识中心
平台

CSS 色彩管理与显示可访问性

管理色彩空间、广色域显示、对比度和可访问回退,让不同屏幕上的内容在真实设备上仍然清晰、可读并支持键盘操作。

BotBrowser Team

文档中心

想直接进入 平台 文档吗?

这篇文章属于博客内容库。若你要步骤化配置、参考说明和持续更新,请直接进入对应 docs 分区。

网页颜色是一条链:CSS 指定空间,浏览器转换,屏幕限制,用户设置改变显示。可访问性取决于用户实际看到的文字、背景、状态和回退。

色彩空间与配置文件

rgb() 通常使用 sRGB,现代 CSS 也支持 display-p3、lab 和 oklch。配置文件描述通道与观看条件的关系,却不保证屏幕能显示所有值。设计意图与坐标应分开。CSS Color 5 规范和 MDN color()说明语言,不代表具体显示器。

使用 --surface、--text、--focus-ring 等语义角色,并为每个角色准备广色域、sRGB 和强制颜色版本。

color() 转换

color(display-p3 1 0 0) 请求某空间坐标,浏览器会适配输出设备并可能压缩色域。@supports 只检查语法,不证明屏幕是广色域。应测试渐变、阴影、边框以及焦点、错误和选中状态。

广色域差异

同一广色域图像在不同屏幕、光线和系统管理下会不同。状态不能只用红绿区分,应加入文字、图标、纹理或位置。缩放和字体大小也会改变实际可读性。

BotBrowser 支持在记录的管线中运行授权的颜色、对比度和偏好流程,但不能改变用户屏幕的物理色域,也不能证明每台设备都具备可访问性。请参考 BotBrowser 高级功能,并检查真实设备和辅助技术。

对比度与可访问性

对比度属于具体的颜色对和状态。应按计算样式检查文字、背景、图片、叠加层、焦点、错误、禁用和选中状态。确定性夹具应包含标题、正文、链接、焦点和错误,然后用缩放、强制颜色、键盘和屏幕阅读器检查。通过比例不代表细字体或纹理一定舒适。

尊重 prefers-contrast、强制颜色和 prefers-reduced-motion,不要借此建立设备画像。

回退交付

从 sRGB 或系统颜色开始,支持时叠加广色域声明,并提供高对比度规则。声明失败时保留之前的有效值;颜色对不满足要求时,用文字和图标保留相同状态。调色时保留选择、图表范围、焦点和验证文字。

记录上下文、语法、颜色、对比度、偏好和可见限制,不保存截图或私密数据。参考浏览器版本验证和兼容性回退指南。

固定发布记录

固定 CSS、角色表、回退、对比度目标、夹具和偏好状态。保留 P3 被解析但被屏幕映射、或夹具需要更暗回退的负面证据。发布说明写明组件、假设、回退和恢复方式,不承诺所有屏幕颜色相同。

更换字体、图标、图片、阴影、webview、打印样式或主题后重新运行检查。几何变化也可能改变对比度。流程是定义角色、转换、测试色域、验证状态、保留偏好并固定证据。

颜色经过转换和检查后显示为可访问结果。

降低饱和度后品牌意图仍然清晰。

焦点保留可见边框。

错误状态包含解释文字。

选中状态增加其他提示。

系统偏好得到尊重。

打印使用高对比度。

webview 可能改变背景。

测试记录显示上下文。

截图不能代替键盘检查。

调色后操作仍然可用。

界面说明屏幕限制。

升级后重复运行夹具。

回退保留标签。

检查比较所有状态。

降低饱和度后意图仍然清晰。焦点保留边框,错误包含文字,选中状态有额外提示。系统偏好得到尊重,不建立设备画像。打印使用高对比度,webview 可能提供不同背景。测试记录上下文,调色后保留操作,并在升级后重复运行。

公开来源

#CSS#色彩管理#可访问性#浏览器兼容性

让 BotBrowser 从研究走向生产

先用这些指南理解模型,再进入跨平台验证、隔离上下文和面向规模化的浏览器部署。