1. HTML中避免仅用颜色作为唯一提示的核心做法
语义化结构与可访问性优先
在网页设计中，颜色常被用来指示交互状态，但这并不是可靠的唯一提示。实际应用中应通过文本、图标、形状和ARIA属性来传达信息，确保不同能力的用户都能获得同样的理解。颜色不可替代文本信息，这是实现无障碍性的关键原则。
使用语义化HTML标签，如 <button>、<input> 和 <section>，能让屏幕阅读器更好地描述页面结构与控件状态，提升可访问性与搜索引擎的理解能力。
此外，通过引入ARIA属性，如 aria-label、aria-checked、aria-live 等，将动态状态信息暴露给辅助技术，减少对颜色的依赖性，从而改善用户体验。
文本与图片的可替代描述
将状态以明文文本呈现，比如按钮上直接写明“提交中…”，并在视觉上辅以非颜色要素（如形状、边框、图标等），以提升无障碍可见性与用户体验。
图片中的信息应提供替代文本（alt），并确保信息传递不依赖仅颜色的差异，这能使图片在弱光或高对比度模式下也易读。替代文本是实现信息可达性的关键。
在设计阶段，优先保持结构清晰，避免通过颜色来表达重要性或分组信息，确保所有用户都能获得一致的信息传递。
2. 使用对比和形状等非颜色提示的手段
形状、纹理与文本描述的组合
为不同状态配备形状与纹理差异，如圆角按钮代表普通状态，带有特殊纹理的控件表示警告，这些都可作为颜色之外的提示，提升可辨识性。形状与文本并用，是无障碍设计的有效实践。
文字标签应始终存在，且在可能的情况下，使用可读的对比文本来描述状态，例如“禁用”、“已完成”、“必填”等。文本描述优于仅颜色描述，能够覆盖更多用户场景。
图标应能独立传达信息，同时提供文本说明。避免让图标仅靠颜色变化来传达状态，否则色觉障碍用户会错失信息。
图标与颜色的协同使用
在界面中让图标本身携带含义，并附上文本描述，确保任意用户都能理解状态。文本与图标双重提示提升无障碍性。
CSS层面可通过边框、阴影、背景纹理等非颜色属性来反映状态，从而在颜色受限或离线模式下仍具备层级感与可辨识度。多要素提示提高用户体验。
3. 颜色对比与测试的实用流程
对比度标准与落地实践
遵循WCAG 2.1 AA对比度标准，普通文本的对比度应至少达到 4.5:1，大文本应达到 3:1，这为色觉障碍用户提供了更好的可读性。
在设计阶段就进行对比度评估，选择高对比度的配色方案，并确保背景与文字之间具备充足的对比度。这是提升无障碍性的关键步骤。
对于按钮、链接和状态指示，除了颜色外，应添加明确的文本和形状提示，确保不同用户群体都能一致地理解界面信息。多元化提示能显著提升用户体验。
开发与测试的实用示例
下面给出一个示例，展示如何在不以颜色为唯一提示的前提下，仍能显著表达状态信息。
<button aria-pressed="true" class="state-btn">已启用
</button>.state-btn {color: #ffffff;background-color: #0a74da;border: 2px solid #0a6bdc;
}
<!-- 通过文本、边框和背景色共同表达状态，而非仅靠颜色 -->:focus-visible {outline: 3px solid #005fcc;outline-offset: 2px;
}// 简单示例：通过 aria-live 通知动态状态
const status = document.querySelector('#status');
status.textContent = '加载完成';
