色彩无障碍设计：对比度与色盲友好

把品牌色做得好看不难，难的是让色觉障碍者也能分清——而这件事在多数品牌规范里是空白的。色彩无障碍设计是指在品牌配色的选择与使用中，保证信息不因颜色差异或对比度不足而丢失的做法，它同时涉及对比度阈值与"不依赖颜色单独传达信息"两条要求。本文讲清对比度的判据、色觉障碍友好的三条做法、检查流程与四类常见问题。

一、对比度：有明确判据的一项

这是品牌色彩里少有的"有国际通行量化标准"的部分。

色彩无障碍设计是指在品牌色彩的选择与落地中，确保文字、图标与关键信息在不同视觉条件下都能被识别的做法；它建立在两条要求上：一是前景与背景的对比度达到通行阈值，二是不把颜色当作唯一的信息通道。

网页内容无障碍指南（WCAG，现行版本 WCAG 2.2，2024 年 12 月 12 日成为 W3C 正式推荐标准）对文本与背景的对比度给出了分级要求：普通文本至少 4.5:1、大号文本至少 3:1，这一条是 SC 1.4.3（AA 级）；更严格的 SC 1.4.6（AAA 级）则要求普通文本达到 7:1、大号文本 4.5:1。

其中"大号文本"的官方定义是 18 磅，或 14 磅粗体。这套数值是可计算的——把两个颜色的相对亮度代入公式即可，不需要主观判断，这也是它与"颜色好不好看"最根本的区别。

需要立刻说明的是：WCAG 是针对网页内容的指南，不是品牌设计标准；它约束的是"呈现出来的最终颜色组合"，而不是"品牌色本身"。也就是说，品牌标准色可以保持不变，需要调整的是它与具体背景的组合方式。这与品牌色彩规范的关系，可参考 品牌标准色的选择逻辑：四条依据。

一句话总结：色彩无障碍设计建立在两条要求上——前景与背景的对比度达到通行阈值（WCAG 对普通文本要求至少 4.5:1、大号文本至少 3:1 为 AA 级，AAA 级为 7:1 与 4.5:1），以及不把颜色当作唯一信息通道；它是品牌色彩里少有的可量化部分，且约束的是"最终颜色组合"而不是"品牌色本身"。

二、色觉障碍：三条做法

"色盲友好"不是把颜色做得更灰，而是让信息不只依赖颜色。

第一条：不把颜色当作唯一区分手段。 图表用颜色区分系列时，同时给出形状、图案或直接标注；状态用颜色表示时，同时给出文字或图标。

这条要求有两条明文依据：无障碍指南里的 SC 1.4.1 "Use of Color"（A 级）——颜色不得作为传达信息、表明动作、提示响应或区分视觉元素的唯一视觉手段；国际标准 ISO 9241-303:2008 第 5.6.4 条同样写明"颜色不应是唯一的编码手段……为冗余起见还应采用其他编码形式"，其 5.6.5 条进一步建议用三角形、圆形这类几何图形做补充编码。

第二条：优先保证明度差，而不是色相差。 最常见的色觉障碍类型是红绿色觉异常，这类用户对红与绿的区分能力弱，但对明度差异的感知基本正常。因此在需要强区分的地方，靠明度拉开差距比靠色相更可靠——这也与"唤醒度更多由明度与饱和度驱动"的结论方向一致，可参考 色彩心理学：品牌联想从何而来。

第三条：用工具验证，而不是凭感觉。 常见的做法是把配色做一次色觉障碍模拟（把图像按不同色觉类型转换），再看关键信息是否仍然可分；更严格的流程是转成灰度再检查一遍——灰度检查之所以有效，是因为它在极端情况下把所有色相差都抹掉了，剩下的只有明度关系。

这里要补一句：色觉模拟工具本身并没有权威验证——它们多基于近似算法，ISO、IEC 与 CIE 都没有认可任何色觉模拟模型。因此模拟结果只能当筛查，不能当依据；相比之下灰度检查更可靠，因为它直接检验的是明度关系。

关于比例，这里可以给出可追溯的口径：一项覆盖全球的流行病学研究给出的患病率是欧洲裔男性约 8%、女性约 0.4%，中国与日本族裔男性为 4%–6.5%；ISO 9241-303:2008 第 5.6.4 条给出的男性区间则是 8%–10%。需要注意的是，流传更广的"0.5% 女性"与原始研究不符（一手研究为 0.4%），而"1/12 男性、1/200 女性"的说法出自一家倡导组织的网页、并无引注——引用时用族群区间，不要用单一数字。

一句话总结：色觉障碍友好的三条做法是不把颜色当作唯一区分手段（WCAG 的 SC 1.4.1 与 ISO 9241-303 第 5.6.4 条都明文要求"颜色不得是唯一手段"）、优先保证明度差而不是色相差（红绿色觉异常者对明度差异的感知基本正常）、以及用色觉模拟与灰度检查来验证（模拟工具无权威验证，只能当筛查）；比例上可引一手研究的族群区间——欧洲裔男性约 8%、女性约 0.4%，中国与日本族裔男性 4%–6.5%。

三、检查流程

把无障碍检查放进现有流程，它才不会被跳过。

第一步，列出所有"靠颜色说话"的位置。 图表系列、状态标签、链接、按钮、表单校验、地图与图示、数据可视化。这一步的产出是一张清单，而不是一句原则。

第二步，对每个位置做对比度计算。 文字与图标按 WCAG 的阈值检查；不要凭肉眼判断——很多"看起来很清楚"的组合实际只有 3:1 左右。

第三步，做色觉模拟与灰度检查。 把关键界面或物料做一次色觉障碍模拟，再转一次灰度，逐项核对第一步清单上的位置。

第四步，为不达标的位置准备替代方案。 可行的替代有三类：换背景（同一品牌色配不同底色往往就能达标）、换层级（把该信息从小字改成大字，或加粗）、加通道（补文字、形状或图案）。注意调整顺序：先动背景与层级，最后才考虑改品牌色。 品牌标志本身的可读性检验，可参考 优秀标志的五大标准：简洁与难忘。

一句话总结：检查流程分四步——先列出所有"靠颜色说话"的位置（图表、状态、链接、校验、地图），再对每个位置做对比度计算（不凭肉眼），再做色觉模拟与灰度检查，最后为不达标位置准备替代方案；替代的优先顺序是先换背景、再换层级（字号字重）、最后才考虑调整品牌色本身。

四、四类典型问题

第一种：品牌色配白字不达标。 一个明亮的主色配白字，看起来"很清楚"，实测对比度却不足。修正方向是配深色文字或加深底色，而不是改品牌色。

第二种：图表只靠颜色区分。 系列一到系列六全靠颜色，色觉障碍者只能看到几条相似的线。修正方向是叠加线型、标记点或直接标注。

第三种：状态只用颜色表示。 成功与失败用绿色与红色小圆点区分。修正方向是补上文字或图标（对勾与叉号）。

第四种：只在浅色模式里检查。 深色模式上线后才发现对比度不足。修正方向是把两种模式一起纳入检查清单。

典型问题	成因	修正方向
白字不达标	只凭肉眼判断	配深色字或加深底色
图表只靠颜色	未加第二通道	叠加线型或标记
状态只用颜色	未加文字图标	补对勾/叉号与文字
只查浅色模式	未纳入深色场景	两种模式一起检查

一句话总结：四类典型问题是浅色底配白字实测不达标（应改配深色字或加深底色而非改品牌色）、图表只靠颜色区分（应叠加线型或标记）、状态只用颜色表示（应补文字或图标）、以及只在浅色模式里做检查（应把深色模式一起纳入清单）。

常见问题

Q1：无障碍要求会限制品牌色的选择吗？

比想象中小。无障碍标准约束的是"颜色组合"，而不是"颜色本身"——品牌可以继续使用任意品牌色，需要调整的是它与背景、字号、粗细的组合方式。

真正的限制出现在一种情况下：品牌色被用作承载信息的唯一通道（例如"红色代表错误、绿色代表正确"）。此时问题不在品牌色，而在"只靠颜色"。可行的处理是保留品牌色，同时补上文字或图标——这样既保住了视觉一致性，也保住了信息可达性。

Q2：对比度达标就够了吗？

不够，对比度只是"看得清"的必要条件。完整的要求还包括：信息的层级是否清楚（标题与正文的差别是否只靠颜色）、颜色是否是唯一通道（已在第二节说明）、小尺寸与低分辨率下是否仍成立（图标与细线最先失效）。

还有一条常被忽略的：对比度过高同样有问题。纯黑底配纯白字在长时间阅读时会加剧视觉疲劳，这也是深色模式通常不用纯黑的原因之一。因此更实用的目标是"足够且舒适"，而不是"越高越好"。

Q3：零基础怎么练无障碍检查？

建议按"抄、算、拟、改"四步练。第一步抄：找三个你常用的网站或应用，逐个找出它们"靠颜色说话"的位置，列成清单。第二步算：用在线对比度工具或自己算，核对清单里每个位置的实际比值，记录不达标的项。

第三步拟：把其中一个界面的截图做一次色觉障碍模拟，再转成灰度，看清单里的信息是否还能被区分。第四步改：为不达标的位置各写一条修改方案，并注明你采用的是"换背景、换层级还是加通道"中的哪一种。走完这四步，你给出的配色建议会自带一份可核对的检查记录。

延伸阅读

想知道行业色彩惯性与差异化之间的取舍，可以看 后浪教育｜行业色彩惯性：金融蓝、医疗绿与餐饮红；想知道品牌色在深色界面里怎么适配，可以接着看 后浪教育｜深色模式下的品牌色适配方法。

软件版本、行业规范会持续更新调整。本文资料仅作参考，全部软件操作与制图规范请以官方最新版本及现行行业标准为准。

想了解品牌视觉设计课程如何助力你的职业发展？

后浪教育专注设计职业培养，品牌视觉设计课程按初阶、中阶、高阶三阶段九大类目设置，从 PS 软件、版式色彩构成，到企业标志、字体设计、品牌 IP 形象、VIS 识别系统、品牌包装与印刷、品牌策划与文案，全链路覆盖。课程以真实商业项目为实训作业，帮助零基础学员在实战中沉淀作品集。

后浪教育官方报名咨询热线：19373124902

可提供服务：品牌设计课程咨询、职业学习规划、试听课预约、一对一专业顾问答疑