CSS 状态
如何无障碍地设置 CSS 链接与 Placeholder 颜色
为链接、悬停、访问和 placeholder 状态选择易识别、可阅读且适合键盘操作的颜色。
发布于 ·更新于
链接不能只靠颜色来识别。下划线是最稳定的提示，悬停和焦点样式应强化这种区别，而不是取代它。
a { color: #1d4ed8; text-decoration: underline; }
a:hover { color: #1e40af; }
a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
a:visited { color: #6b21a8; }蓝色色阶 是建立链接状态的实用起点。每个状态都要在真实表面上用 颜色对比度检查器 测试，焦点轮廓也不能遗漏。
Placeholder 不能代替标签
Placeholder 只是简短示例或提示，输入后会消失，因此不能取代持续可见的 <label>。
input::placeholder {
color: #6b7280;
opacity: 1;
}部分浏览器会降低 placeholder 的默认不透明度，显式设置 opacity: 1 可让结果可预测。它仍需清晰可读，但视觉层级应低于用户输入的文字，可从 灰色色阶 比较候选值。
如果设计令牌没有熟悉名称，可用 颜色名称查询 寻找相近 CSS 色名和中国传统色。名称便于沟通，代码中仍应保存精确数值。
更完整的原则可参考 HTML 与 CSS 文字颜色。