contrast-check

Name: contrast-check
Author: pascalorg

github.com/pascalorg设计与 UI10061 次安装7 周前更新

代码仓库

关于 contrast-check

用于检查颜色对是否符合 WCAG 2.1 对比度要求的命令行技能。它会计算对比度，并给出普通和大号文本的 AA/AAA 通过结果，可检查单组颜色或整套配色。

主要功能

01接收十六进制颜色值
02计算每组前景色与背景色
03检查 WCAG 2.1 AA 和 AAA 阈值
04报告对比度及通过结果
05支持检查整套配色

适用场景

01检查文字在背景上的可读性
02审计配色的无障碍合规性
03验证从设计中提取的颜色

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pascalorg/skills --skill contrast-check

安装后在 Claude Code 中输入/contrast-check确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

scripts/

contrast-check.js

contrast-check.sh

package-lock.json

package.json

详细介绍

对比度检查

根据 WCAG 2.1 对比度要求检查颜色组合。输入十六进制颜色，即可获取对比度以及普通文本和大号文本的 AA/AAA 通过或未通过结果。

适用场景

检查文本颜色在背景颜色上是否清晰可读
审核整个配色方案是否符合无障碍要求
验证从设计中提取的颜色是否符合 WCAG 标准

工作原理

接收一组十六进制颜色作为参数
计算每一对前景色和背景色的对比度
根据 WCAG 2.1 AA 和 AAA 对普通文本和大号文本的阈值测试每一对颜色

WCAG 阈值：

AA 普通文本 — 比率 >= 4.5:1
AA 大号文本 — 比率 >= 3:1
AAA 普通文本 — 比率 >= 7:1
AAA 大号文本 — 比率 >= 4.5:1

用法

bash <skill-path>/scripts/contrast-check.sh <color1> <color2> [color3] [color4] ...

参数：

两个或更多十六进制颜色（必填）。可带或不带 # 前缀。

示例：

# Check a single pair
bash <skill-path>/scripts/contrast-check.sh "#1a1a2e" "#ffffff"

# Check all pairs in a palette
bash <skill-path>/scripts/contrast-check.sh "#1a1a2e" "#e94560" "#ffffff" "#3d83f7" "#bdbdbd"

输出

{
  "pairs": [
    {
      "foreground": "#1a1a2e",
      "background": "#ffffff",
      "ratio": 16.57,
      "aa": { "normal": true, "large": true },
      "aaa": { "normal": true, "large": true }
    },
    {
      "foreground": "#e94560",
      "background": "#ffffff",
      "ratio": 3.94,
      "aa": { "normal": false, "large": true },
      "aaa": { "normal": false, "large": false }
    }
  ],
  "summary": {
    "totalPairs": 2,
    "passAA": 1,
    "passAAA": 1,
    "failAA": 1
  }
}

字段	类型	描述
foreground	String	前景色（文本颜色）
background	String	背景颜色
ratio	Number	对比度比率（例如，16.57 表示 16.57:1）
aa.normal	Boolean	是否通过 WCAG AA 普通文本要求（>= 4.5:1）
aa.large	Boolean	是否通过 WCAG AA 大号文本要求（>= 3:1）
aaa.normal	Boolean	是否通过 WCAG AAA 普通文本要求（>= 7:1）
aaa.large	Boolean	是否通过 WCAG AAA 大号文本要求（>= 4.5:1）

向用户展示结果

检查后，展示一个表格：

Contrast Check Results:

  #1a1a2e on #ffffff — 16.57:1 — AA: Pass — AAA: Pass
  #e94560 on #ffffff —  3.94:1 — AA: Fail (normal) / Pass (large) — AAA: Fail

Summary: 1/2 pairs pass AA for normal text, 1/2 pass AAA.

标记未通过的颜色组合，并建议修正方法（调暗或调亮颜色，使其达到阈值）。

故障排除

无效颜色 — 颜色必须是有效的十六进制值（3 位或 6 位，可带或不带 #）。

与 image-analysis 配合使用 — 先使用 image-analysis 技能从设计中提取颜色，再将十六进制值传入此技能以审核无障碍性。

支持 Markdown

登录后评论