对比度

Color Contrast

样式与 CSS也叫：颜色对比度、文字对比度、Contrast Ratio

一句话：文字颜色和背景颜色之间的明暗差异，差异太小会看不清，无障碍标准要求正文对比度至少 4.5:1。

详细解释

对比度用一个比值表示，从 1:1（颜色完全相同）到 21:1（白底黑字）。WCAG 无障碍标准的 AA 级要求：普通正文至少 4.5:1，大号文字（约 24px 以上，或约 19px 以上加粗）至少 3:1，图标、输入框边框等关键图形也要至少 3:1。

最常见的问题是「高级感灰字」：白底上的浅灰文字，设计稿里看着精致，但在阳光下、低亮度屏幕上或对视力不好的用户来说根本看不清。占位提示文字、白字放在浅色按钮上也经常不达标。

检查方法：在 Chrome 开发者工具里选中文字元素，颜色选择器会显示对比度数值；也可以用在线检测工具。深色模式同样要检查。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

请检查页面所有文字和背景的对比度：正文至少 4.5:1，大标题和图标至少 3:1；白底上的 #bdbdbd 辅助文字加深到 #757575；主色按钮上的白字如果不达标，就加深按钮背景色；深色模式按同样标准检查。