SuperAPI AI 工具集

color-contrast-auditor

通用与其它

查看项目

更新于 10-15 20:30

技能介绍

用途:检测界面中导致文字不可读的颜色对比度违规,并给出符合 WCAG 的修复方案。结合数学对比度计算与视觉感知评估。

适用时机:网站或应用截图中疑似对比度问题、CSS/Tailwind 文件配色审计、“看不清/难辨认”反馈、上线前无障碍检查、设计系统颜色验证。不适用于挑选品牌色、色彩和谐美学、非视觉无障碍(屏幕阅读器、键盘导航)。

主要能力:按 WCAG 2.1 标准核对对比度要求。AA 级:普通文本(<24px 或 <18.66px 粗体)4.5:1,大文本(≥24px 或 ≥18.66px 粗体)3:1,UI 组件与图形对象 3:1。AAA 级:普通文本 7:1,大文本 4.5:1。焦点指示器、表单边框、表意图标需与相邻颜色达 3:1。对比度公式为 (L1+0.05)/(L2+0.05),相对亮度经 gamma 校正后按 0.2126R+0.7152G+0.0722B 加权。

使用方式:先做视觉扫描,按字号区分文本类型并识别交互元素;再从 CSS 或 Tailwind 提取颜色,例如 grep -E "(color:|background:|#[0-9a-fA-F]{3,8}|rgb|hsl)" styles.css 与 grep -E "(text-|bg-)" *.tsx *.jsx;随后逐对计算比值并与要求比对;最后输出报告,按严重程度(<2:1 严重、2:1–3:1 中等、3:1–4.5:1 轻微)列出位置、前景、背景、比值、要求与修复色值。

常见失败模式:浅色文字配浅色背景、白底浅灰字、饱和色看似明亮实则不足、低对比“极简”风格、过浅的占位符文字、渐变背景上固定文字导致局部不可读。

限制与注意:对比度达标不能完全解决色盲问题,不应仅靠颜色传达含义,需配合图标、图案或文字标签;红绿、蓝紫、绿棕、浅绿黄等组合需额外测试。资料未提供该技能的安装命令、收费方式与具体平台支持信息。