新正文色、弱提示灰、错误红、暗色主题——任何会影响可读性的颜色决策。
产品与设计 · 视觉基础
对比Contrast
用可测量的前景/背景对比阈值验收可读性,并保证状态不只靠颜色传达。
按阈值检查颜色对比
选择正文、辅助文字或 CTA 样例,再切换 WCAG 级别阈值,观察哪些组合通过、哪些需要修复。
场景:验收正文、辅助文字和 CTA 是否够清楚。先选样例与阈值,再检查通过或需要修复。
当前:正文 / 白底 · 7.2:1 · 阈值 4.5:1
实时预览 · 被验收物件7.2:1
保存后,项目会出现在公开列表。
待检查待检查已选 正文 / 白底;对比比率 7.2:1,点「检查对比阈值」看是否达标。
面板里测到的结论怎么用
刚才的通过/未通过,对应的是用途匹配阈值、主题复测,以及状态不能只靠颜色。
- 正文、辅助文字、CTA、焦点和图形都按用途选阈值,而不是统一「鲜艳一点」。
- 亮/暗主题与强光、小屏都要复测,不能只看默认背景。
- 错误、成功和焦点配合图标、文字或边框,颜色只加强。
什么时候专门验对比
改色板、加状态色或新主题时必须验;纯排版微调且未动颜色时可抽查。
对比够了仍可能层级混乱;还要配合字号、间距与焦点样式一起看。
同一辅助文字:正例与反例
目标都是让次要信息可读且有层级。差异只在是否用可测阈值,以及状态是否只靠颜色。
正文用 7.2:1,达到 4.5:1;错误态除颜色外还有图标和文字「未通过」。亮/暗主题都测过。
差异:比率可测,状态不靠颜色独自传达。辅助文字为了「高级感」做成浅灰 3.1:1;错误/成功只换红绿,强光下分不清。
差异:只改了一处——用主观观感代替阈值与冗余信号。快速自测
为什么辅助文字不能只凭「浅一点更高级」决定颜色?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。