颜色

符合无障碍设计标准的颜色

请勿仅使用颜色来指示界面组件的存在或其状态：请使用图标和/或形状来帮助区分。请勿仅使用颜色来表示成功/错误。使用图标或文字。

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

对比度

• 最低对比度标准：普通文本保持 4.5:1，大号文本或图标保持 3:1。
• 确保非文本对比度符合标准：确保界面组件边界和状态的对比度至少为 3:1。
  • 这包括构成界面组件边界或指示界面组件存在的视觉元素（边框、背景、盒阴影、下划线），例如输入字段边框。
  • 这还包括指示组件内活动状态的视觉元素（例如，复选框对勾标记或开关滑块）。
  • 注意：满足 3:1 的非文本对比度要求可能会给极简设计带来挑战。柔和的渐变或细微的内嵌/外嵌阴影可以柔化视觉边界，同时满足无障碍要求。
• 仅在必要时使用 prefers-contrast：如果设计中使用了需要增强的低对比度强调色（例如，细微的边框、柔和的次要文本），请使用 @media (prefers-contrast: more)；大多数已达到基准对比度的网站都不需要使用它。

浅色和深色配色方案

• 支持浅色和深色配色方案：遵循 @media (prefers-color-scheme: dark) 并将其与 color-scheme CSS 属性搭配使用，以便表单控件、滚动条和其他 UA 呈现的表面保持一致。 如需了解详情，请参阅深色模式。

强制颜色模式

• 支持强制颜色模式：在强制颜色模式（Windows 上的高对比度模式）下，浏览器会使用系统关键字覆盖作者颜色，并移除 background-image、box-shadow 和 border-image。使用 @media (forced-colors: active) 为颜色令牌定义系统颜色后备。
• 仅在颜色是重要信息时使用 forced-color-adjust: none（语法荧光笔、颜色选择器色板）。请勿仅为了保持美观而使用 forced-color-adjust: none。
• 不要依赖 background-image、box-shadow 或 border-image 来传达边框、分隔线或状态：它们会在强制颜色模式下消失（通常在打印时也会消失）。如果必须使用，请确保在强制颜色模式下有替代方案，例如使用系统颜色关键字（CanvasText、LinkText、ButtonText、Highlight、GrayText 等）的 outline 或 border。

生成色调

在动态生成色调之前，请检查是否可以使用现有的预定义设计令牌。这样一来，设计师可以更好地控制设计，并确保一致性。

如果您需要动态生成更浅或更深的颜色，请执行以下操作：

• 请勿仅调整 oklch/oklab 或 lch/lab 中的亮度通道，例如 oklab(from var(--primary) 0.9 a b)。虽然理论上这是正确的方法，但浏览器尚未实现色域映射，因此生成的颜色不可预测。
• 您可以使用 color-mix() 与白色或黑色混合（最好在 oklab 中）。这样可以使颜色安全地保持在色域内，但往往会使颜色过度去饱和，并产生褪色的色调和阴影。
• 您可以将亮度调整与其他任何方法（例如 color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)）结合使用，以在两者之间取得平衡，但亮度调整幅度不应超过 30%。