技能 · 视觉设计
颜色对比度检查：正文/大字号/按钮状态
用 WCAG 相对亮度公式检查文字与背景的对比度；正文 4.5:1、大字号 3:1、AAA 7:1，按钮/禁用态单独看。
适用边界：适合网页、海报、Banner、PPT 的可读性检查；渐变背景、图片背景、发光文字不能只用一个 HEX 值判断，需要取实际叠加后的颜色。
怎么做
- 先取真实文字色和背景色：不要取抗锯齿边缘，也不要拿设计器的色板代替实际导出颜色。
- 算对比度：正文目标 ≥4.5:1，大字号（约 24px 或 18.66px 粗体）≥3:1，AAA ≥7:1。
- 把按钮、禁用态、浅灰占位文字单独列出来，不要只测主标题。
- 回到真实尺寸和屏幕看一次；数字达标但字号太小/字重太细，仍可能读不清。
交付前检查
- 正文和背景的对比度达到 4.5:1，或明确说明只用于大字号。
- 按钮文字、禁用态、浅灰辅助文字都单独测过，没有漏项。
- 没有用抗锯齿边缘色/渐变中间色代替真实主色。
可复制提示词
你是无障碍设计审查员。输入：【文字色】=____；【背景色】=____；【字号/字重】=____；【用途】=____。请按 WCAG 相对亮度公式计算对比度，分别判断正文 4.5:1、大字号 3:1、AAA 7:1 是否达标。给出：1.实际对比度；2.达标结论；3.如果不达标，给 2 个只改颜色/字重的修正方案；4.提醒渐变/图片背景需要取实际叠加色。不要承诺无障碍合规认证。
相关工具
配套模板
同类技能
电商主图信息层级：3 层排版不改产品
把主图拆成背景、主体、卖点三层，按注视顺序排布，让买家在缩略图尺寸下先看到产品再看卖点。
查看 →海报配色：从品牌色推出 4 个可落地颜色
从已有品牌色出发，推导出主色、辅助色、背景色和强调色四个角色，避免整张海报用到五六个饱和色。
查看 →图标提示词：一句话锁定符号与风格
把图标的符号、风格、线条和背景写成一段可复用的提示词，让同一套图标在不同批次里保持统一。
查看 →更新时间：2026-10-29 · 步骤是通用做法，平台/客户规则以实际页面为准；不承诺排名、过稿或收益。
跨库学习路径
按共同关键词匹配，不是随机推荐；从任务到提示词/教程/项目继续走。