CSS 色彩管理与显示可访问性
管理色彩空间、广色域显示、对比度和可访问回退,让不同屏幕上的内容在真实设备上仍然清晰、可读并支持键盘操作。
BotBrowser Team
网页颜色是一条链: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 可能提供不同背景。测试记录上下文,调色后保留操作,并在升级后重复运行。