暗黑模式下color-contrast不生效是因为该CSS函数不存在，需手动验证对比度；必须重设input::placeholder、textarea边框、语义标签及焦点状态等元素的颜色以满足WCAG标准。
暗黑模式下color-contrast不生效怎么办
浏览器目前没有color-contrast这个 CSS 函数，别被过时教程或 AI 生成内容误导。WCAG 要求的文本对比度（AA 级 4.5:1，AAA 级 7:1）必须靠人工验证或工具检测，不能靠“自动计算”。系统级暗色模式切换后，很多开发者只改了背景色，却忘了检查input边框、label灰度、placeholder色值——这些地方最容易跌破对比度底线。
prefers-color-scheme匹配后，哪些元素必须手动重设对比度
媒体查询生效 ≠ 所有文本自动可读。以下元素在暗色背景下极易失效，需逐个确认：
-
input::placeholder：默认是浅灰（如#999），在#121212背景上对比度仅≈2.8:1，必须显式设为color: #a1a1a1或更高亮度值 -
textarea和select的边框：Chrome 默认border-color: #ccc，暗色下几乎隐形，应设为border-color: #374151（对应 WCAG AA） -
small、time、figcaption等语义弱标签：常继承父级 color，但父级可能用了var(--text-muted)这种低对比变量，得单独加[data-theme="dark"] small { color: #9ca3af; } -
svg图标内文字或描边：若用fill="currentColor"，则依赖父级color；但若父级color本身对比不足（比如#6b7280on#1f2937），就得强制提升
怎么测真实对比度，而不是“看起来还行”
别信肉眼判断。用 DevTools 的 Accessibility 面板直接看每个节点的 contrast ratio 数值——它会按实际渲染颜色（含透明度叠加、父级 inherit）实时计算。常见陷阱：
- 用
rgba(255,255,255,0.7)配background: #1e1e1e，算出来是 4.2:1（不达标），不是“带点透明更柔和” - 阴影叠加导致背景色变深（比如
box-shadow: 0 1px 3px rgba(0,0,0,0.1)压在#1f2937上），DevTools 会把最终合成色当背景，必须实测 - OLED 屏幕纯黑（
#000）会让白色文字边缘发虚，建议用#121212或#1e1e1e作底，再配#e6e6e6文字，既达标又护眼
mark、abbr、dfn这些语义标签怎么保可访问性
<mark>默认黄底黑字，在暗色下直接废掉；<abbr>和<dfn>常靠border-bottom或font-style提示，但暗色中细线易丢失。处理原则就一条：所有语义高亮必须在@media (prefers-color-scheme: dark)里重定义视觉表现，且禁用纯色硬编码：
立即学习“前端免费学习笔记（深入）”；
-
mark不用#ff0，改用background-color: #2563eb20+color: #f9fafb（蓝调半透底+高亮白字） -
abbr[title]加border-bottom: 1px dotted var(--accent)，并确保--accent在暗色下是#3b82f6这类有足够对比的蓝 -
dfn别只靠font-style: italic，同步加color: var(--emphasis)，且--emphasis在暗色中必须是比正文高两级的亮度（如正文#e5e7eb，强调#f9fafb）
最易忽略的是焦点状态：focus-visible伪类在暗色下若用默认outline: auto，Chrome 可能渲染成模糊白环，必须显式写outline: 2px solid var(--focus-ring)并确保--focus-ring是 WCAG AAA 级可辨识的蓝或紫。
