用途:检测界面中导致文字不可读的颜色对比度违规,并给出符合 WCAG 的修复方案。结合数学对比度计算与视觉感知评估。
适用场景:疑似对比度问题的网站/应用截图、CSS/Tailwind 颜色审计、用户反馈“看不清”、上线前无障碍检查、设计系统颜色验证。不适用于品牌配色选择、色彩和谐美学、非视觉无障碍(屏幕阅读器、键盘导航)。
主要能力:按 WCAG 2.1 标准核对对比度要求——普通文本(<24px 或 <18.66px 粗体)最低 4.5:1,大文本(≥24px 或 ≥18.66px 粗体)3:1,UI 组件与图形对象 3:1;AAA 增强要求普通文本 7:1、大文本 4.5:1。使用公式 Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) 计算,并识别常见失败模式:浅底浅字、灰字综合征、看似鲜艳的饱和色、低对比“极简”风格、过浅的占位符文字、渐变背景上的固定文字。
使用方式:对截图做视觉扫描,按字号与交互元素分类;从 CSS/Tailwind 提取颜色,例如 grep -E "(color:|background:|#[0-9a-fA-F]{3,8}|rgb|hsl)" styles.css 与 grep -E "(text-|bg-)" *.tsx *.jsx;逐对计算比值并生成按严重程度分级的报告,给出具体十六进制替换值。可配合 WebAIM、Coolors、Adobe Color 等在线检查器,Chrome/Firefox 开发者工具,axe-core、Lighthouse、Pa11y 等自动化工具验证。
限制:对比度达标不能完全覆盖色盲问题,需额外避免仅靠颜色传达含义,并测试红绿、蓝紫、绿棕、浅绿黄等组合。禁用元素无对比度要求。具体收费、平台与效果资料暂未提供。