bootstrap 5 默认 .invalid-feedback 颜色 #f44336 对比度仅约 3.8:1，低于 wcag aa 要求的 4.5:1；rgba 透明色、半透背景、form-floating 结构及未校验的 placeholder 均加剧合规风险，需用深色值（如 #b71c1c）、加粗字重、调整行高并分主题验证对比度。
为什么 .invalid-feedback 文字颜色默认不满足 WCAG 对比度要求
Bootstrap 5 默认的 .invalid-feedback 文字色是 #f44336（浅红），背景通常是白色或浅灰（如 #fff 或 #f8f9fa）。这对普通用户看似醒目，但实测对比度仅约 3.8:1 —— 低于 WCAG AA 级最低要求的 4.5:1。问题不在“红不红”，而在“够不够深”。#f44336 的亮度（L in HSL）约 30%，而达标色通常需 L ≤ 22%（比如 #d32f2f 或 #b71c1c）。
rgba() / hsla() 透明色会让对比度验证彻底失效
有人想“柔化提示”，写成 color: rgba(211, 47, 47, 0.9)，结果更糟：浏览器混合后实际渲染色接近 rgb(215, 55, 55)（≈ #d73737），对比度反而降到 3.5:1。工具无法直接解析 rgba 值，必须用 DevTools → “Computed” 面板复制 resolved color，转成 hex 后再测。
- 别信“加了 opacity 就安全”——它只降低可读性，不提升合规性
- 背景若也是半透（如
background-color: rgba(255,255,255,0.95)），得先算两层叠加后的最终背景色，再配文字色 - 移动端高亮文字常叠加在表单控件的浅色 focus ring 上，此时要测的是“文字 vs ring 下方真实背景”的组合对比
form-floating + invalid-feedback 的 DOM 结构会放大对比度风险
使用 form-floating 时，.invalid-feedback 被包裹在 .form-floating 容器内，而该容器常带 background-color: #fff 和 padding，导致提示文字实际渲染区域变窄、周围留白增多——视觉上更“轻”，进一步削弱感知对比。此时单纯改 color 不够，必须同步增强：
-
font-weight: 500或600（默认是 400） -
line-height: 1.3（避免过密行距吃掉字重） - 必要时加
text-shadow: 0 1px 1px rgba(0,0,0,0.1)提升边缘清晰度（慎用，仅当背景复杂时）
JS 主动添加 is-invalid 类时，别漏掉 placeholder 变色
无障碍不只是文字本身：当输入框处于 is-invalid 状态，其 ::placeholder 若仍用默认浅灰色（如 #6c757d），与错误文字形成“双弱对比”，用户可能误判为“未激活”或“已清空”。必须显式覆盖：
.form-control.is-invalid::placeholder { color: var(--error-text); }，且 --error-text 必须是已通过对比度验证的深色值（如 hsl(0, 76%, 18%)），不能复用未校验的变量。
最易被忽略的一点：所有状态切换（valid/invalid/warning）都必须单独验证每种背景下的最终对比度，CSS 变量不会自动适配——var(--error) 在 light 主题下达标，切到 dark 主题后若没重定义，立刻失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
