E3.15.4color pick is not contrast check设计研究

颜色选择不能替代对比度等可访问性校验

别名: 取色不等于对比度 · a11y color · 色相对比

概念解释

选出一个好看的色,并不等于这段文字或这个图标在实际背景上可读、可分辨。取色不是校验(picking is not checking):对比度、色盲可分性、不单靠颜色传递的信息,都要在选择器之外或选择器旁边另做。把品牌主色从色板里点出来,只完成了「值是什么」;它和按钮上的白字、错误态的红、图表里相邻系列之间的关系,选择器一无所知。

选择器可以内嵌对比度提示,但提示针对的是当前这对前景/背景,不能冒充整页甚至整套主题已经通过。

机制

对比度是一对颜色加字号、字重的函数,不是单色的属性。选择器操作的是一个值,校验需要至少两个值以及它们的角色(正文、大标题、非文本图形)。用户在面板里看见一块鲜艳的预览,会把「这块很清楚」推广成「用在界面里也清楚」——预览的底是中性灰或棋盘格,真实底是照片、相邻色块或半透明层。色盲可分性同样是关系:两个系列色各自都合法,叠在一起在第二型色盲下重合。

研究侧用对比度公式、色盲模拟和真实低视力阅读任务。这些测量都不在「点了一块色」里自动发生。把测量做成选择器的附加面板有用,前提是测量对象明确:哪段文本、哪张图、哪种障碍。模糊的绿灯会比没有提示更危险,因为它结束了追问。

怎么研究

在选定的前景/背景对上计算对比度,并用色盲模拟检查相邻类别色。阅读任务让低视力或模拟滤镜下的人读真实字号的字符串、辨认图表系列。

自变量:选择器是否显示对比度、预览底是否等于真实底、是否提供色盲模拟。 因变量:最终配对是否达到可读阈值、系列色在模拟下的混淆率、用户是否过早停止调整。

关键误导是「面板绿灯、页面失败」:预览条件与使用条件不一致。

边界

装饰性大色块、不承载文字或状态的插画,对比度要求不同,不能拿正文阈值去卡背景装饰。强制高对比主题可以在选择器里锁死不合规的值,那是产品策略,仍须说明锁的是哪一对角色。动态背景(视频上的字幕)使单次取色无法保证全程对比,需要描边、遮罩或随帧校验,超出选择器范围。色即信息(仅用红绿表示对错)即使对比度足够,也过不了「不单靠颜色」这一关,选择器给不出替代编码。

怎么落地

  • 在选择器旁针对明确的一对角色显示对比度,并标明字号假设;不要给整页一盏绿灯。
  • 图表系列色提供色盲模拟预览;失败时改形或改线型,不只改饱和度。
  • 把「颜色不是唯一编码」留在状态与图例上:对错要有图标或文字,不只换色。
  • 验证:把选出的色贴进真实界面截图,用灰度与色盲滤镜看文字和图例。预览里好看、滤镜下丢了的,就是选择器替代了校验。

延伸

  • 同组E3.15.1 颜色选择器需同时支持预设色板与自定义取值 · E3.15.2 数值输入应支持十六进制与常见色彩模型互转 · E3.15.3 取色结果需要以色块方式即时预览
  • 相邻F3.03 色彩与明度层级 · E3.01 复选框
  • 站内检索contrast ratio · colour not the only cue · color picker accessibility

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.15.4