语义配色需用业务类名（如.text-error）替代外观类名，结合CSS自定义属性和currentColor实现可维护性，同时适配高对比度模式与forced-colors媒体查询。
color 属性本身不带语义，但通过类名约定可以赋予它明确含义。直接写 color: #e74c3c; 无法传达“这是错误提示”还是“这是次要操作按钮”，后期维护和无障碍支持都会出问题。
用语义类名替代颜色值硬编码
把颜色值从样式声明里抽出来，绑定到有业务含义的类名上。比如 .text-error、.text-success、.text-muted，而不是 .red-text 或 .dark-gray。
- 类名要描述“用途”，不是“外观”——
.text-warning比.yellow-text更可靠，未来换主题时只需改变量，不用全局搜替换 - 避免在组件内部重复定义颜色，统一收口到基础样式层（如
base.css或设计系统 token 文件） - 搭配 CSS 自定义属性（
--color-error）更易维护，例如：:root { --color-error: #e74c3c; } .text-error { color: var(--color-error); }
currentColor 在语义配色中的实际用法
currentColor 是继承自 color 的动态值，适合让图标、边框、伪元素自动匹配文字语义色，但要注意它不“冻结”透明度。
- 如果
.text-error定义为color: rgba(231, 76, 60, 0.8);，那么border-color: currentColor;也会带 0.8 透明度——这在某些边框场景下可能造成对比度不足 - 旧版 Safari 对
currentColor在border或fill中的 alpha 处理不一致，建议在关键路径中显式写死或加降级 - 慎用于
background-color：文字色通常不适用于背景，容易违反 WCAG 对比度要求
高对比度模式与 forced-colors 媒体查询
Windows 高对比度模式或 macOS 的“增加对比度”开启后，浏览器会强制重置部分颜色，color 可能被覆盖为系统语义色（如 CanvasText、ButtonFace），但前提是没用 !important 或内联 style 硬顶。
立即学习“前端免费学习笔记（深入）”；
- 不要用
!important锁定color值，否则会绕过系统强制色，导致文字不可读 - 可用
@media (forced-colors: active)做轻量适配，例如：@media (forced-colors: active) { .text-error { color: CanvasText; forced-color-adjust: none; } } -
forced-color-adjust: none要谨慎加——它会让整个元素退出强制色接管，仅在极少数需要保留原设计意图的图标/装饰场景下使用
语义配色最难的不是写对类名，而是守住边界：不让一个 .text-primary 在按钮里变成背景色，也不让 currentColor 意外透出透明度污染边框。真正稳定的配色体系，靠的是约束，不是自由。
