对比度检查回答的是哪一个问题

W3C WCAG 2.2的文字最低对比要求中,通常文字与背景至少达到4.5:1;符合大号文字条件时至少3:1。大号不是凭视觉随意判断,需依据字号、字重与规范定义。装饰、标志等有各自例外,不能把正文都归为装饰。

这些阈值回答可辨认性的一部分问题,不评价一套配色是否优美,也不单独证明整个网站已经符合无障碍标准。字号、行距、内容结构、键盘使用等仍需分别考虑。

逐对检查,而不是只测主色

本站建议先列出真正相邻的文字与背景组合,再用对比度工具输入最终颜色。渐变与图片背景不能只检查最容易通过的一角;应查看文字实际覆盖位置。

  • 列出正文、次级说明、导航、按钮及悬停等状态的颜色组合。
  • 记录前景色、背景色、字号与字重,再计算对比度。
  • 对不够清晰的组合优先调整明暗,也可改变背景或文字承载方式。
  • 用实际内容再次查看,避免只在短示例里看起来合适。

只靠颜色传信息为什么不够

WCAG的颜色使用准则要求颜色不能成为唯一视觉信息渠道。一个错误框仅从绿变红,可能无法清楚告诉所有人发生了什么;加上“格式有误”等文字和图标,才有更完整的提示。

场景脆弱做法更清楚的做法
超链接仅把文字换成另一种颜色配合下划线或其他可辨线索
折线图系列只用红绿区分增加点形、线型与直接标签
状态提示仅显示红点或绿点添加“待处理”“已完成”等文字
表单错误只改变输入框颜色给出具体错误说明与关联位置

把审美试验与信息检查分开

你可以保留柔和的背景和丰富的装饰色,同时让主要文字拥有清晰对比。不要因为喜欢淡色就把所有字都调淡;也不要把高对比误解为只能使用纯黑与纯白。

这套检查适合网页、屏幕演示和数字阅读内容。印刷品可借鉴明暗与非颜色线索的思路,但屏幕WCAG数值不应被直接当成所有印刷条件的合格证明。

常见问题

把页面转灰度就算检查通过了吗?

灰度预览有助于发现层级问题,但不能替代规范中的颜色数值计算,也不能覆盖全部色觉差异。

两个颜色对比强就能不用文字标签吗?

如果信息依赖准确识别某一种颜色,仍应添加文字或其他线索;尤其不要让读者必须记住红绿各自代表什么。

来源与延伸阅读

  1. W3C WAI:Understanding SC 1.4.3 Contrast (Minimum)

    WCAG 2.2 AA的普通文字4.5:1、大号文字3:1阈值及适用条件。

  2. W3C WAI:Understanding SC 1.4.1 Use of Color

    说明不能只靠颜色传递信息,需要文字、形状等补充线索。

接着阅读

七色堂|从一张照片提取实用配色从照片提取配色,不是把出现次数最多的颜色全部搬出来。先选与用途有关的图,再挑背景色、主体色、强调色与可读文字色,并在真实版面里试用。七色堂|色相明度与饱和度入门先分别问三个问题:偏向哪一类颜色、看起来有多亮或多暗、颜色有多鲜艳。把三个维度拆开,比只说“这个蓝不对”更容易修改和交流。七色堂|色彩资料与来源阅读指南按问题选来源:光谱看科学机构,软件操作看官方文档,网页可读性看W3C,文化解释看具体藏品与研究。来源越权威,也越需要确认它实际支持的是哪一句话。

← 返回七色堂内容首页