不要只依赖颜色
结合图标、文字或形状来传达含义
不要只依赖颜色 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
颜色可能无法被看见
对许多用户来说，您选择的红色和绿色看起来几乎一样。仅使用颜色传达含义，会让他们只能猜测。
色盲很常见
大约每 12 名男性中就有 1 人存在某种形式的色盲。这是受众中很大的一部分，并不是罕见情况。
红绿色彩陷阱
最典型的错误，是使用许多用户看起来完全相同的红色错误提示和绿色成功提示。红绿色觉混淆是最常见的类型。
核心规则
WCAG 准则 1.4.1 规定，颜色绝不能成为传达信息的唯一方式。请始终使用第二种信号进行补充。
添加文字标签
最简单的解决办法是使用文字。给红色字段配上错误标签，即使用户无法分辨颜色，含义仍然清楚。
添加图标和形状
勾号、警告三角形或 X 都能通过形状传达含义。这样即使在灰度模式下，成功和错误也有所区别。
链接需要的不只是色调
灰色段落中的蓝色链接可能会被部分用户忽略。请添加下划线，这样无需依赖颜色也能明显识别链接。
图表是重灾区
只用颜色区分数据系列的图表容易造成问题。请为每条线或每个扇区添加纹理、直接标签或不同形状。
正确进行表单验证
不要只用红色边框标记错误字段。请添加文字形式的错误消息和图标，让每个人都知道哪里出了问题。
灰度测试
快速凭直觉检查：以灰度模式查看您的设计。如果仍然能够区分不同状态和链接，就说明您没有只依赖颜色。
添加下划线的链接
保留下划线，即使用户无法感知颜色差异，也能清楚地识别链接。
a {
color: #0b5fff;
text-decoration: underline;
}快速检查
请决定显示表单错误的最安全方式。
回顾：不止使用颜色
您已经学会，绝不能让颜色成为唯一信号：添加文本、图标、形状或下划线，让所有人都能理解含义。下一步：使用工具检查对比度。🌈
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「不要只依赖颜色」课时是免费的吗？
是的 — 「不要只依赖颜色」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「不要只依赖颜色」这节课中我会学到什么？
结合图标、文字或形状来传达含义 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「不要只依赖颜色」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。