SuperAPI AI 工具集

color-contrast

数据与分析

查看项目

更新于 10-16 00:29

技能介绍

用途:在实现或评审颜色选择时,确保前景与背景对比度足够,使用户能阅读文本、识别控件、感知图形并跟踪键盘焦点;颜色不得作为唯一的信息传达方式。

主要能力:按 WCAG 2.2 AA 给出阈值——普通文本 4.5:1、大文本 3:1、非文本元素(控件边界、图标、图表、焦点指示等)3:1;覆盖 1.4.1 颜色使用、1.4.3 对比度、1.4.5 文本图像、1.4.11 非文本对比、2.4.7 焦点可见;区分 Critical/Serious/Moderate/Minor 严重度并给出优先级。

使用方式:为颜色对同时指定前景与背景,例如 html { background: #ffffff; color: #1b1f23; };用语义化 CSS 变量定义明暗主题配对;焦点样式保留 outline,如 :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; };在 forced-colors 模式下用 @media (forced-colors: active) 修正;用 axe-core 等自动化工具辅助扫描,但需人工验证渐变、图片、透明度、叠加层、焦点几何与强制颜色。

适用场景:文本、表单控件、图标按钮、数据可视化、状态与错误提示、导航链接、焦点指示等几乎所有可视界面元素。

限制:WCAG 阈值为通过/不通过,不可四舍五入;自动化工具无法可靠判断所有背景、图形细节、仅颜色区分和强制颜色失败;APCA 尚未成为 WCAG 要求,实验时仍须并行满足 WCAG 2.2 AA;禁用控件与纯装饰文本有豁免,但不应作为设计目标。具体安装命令与官方文档暂未提供。