跳到正文
cccskills
免费在 GitHub 公开

contrast-check

Check color contrast ratios against WCAG AA and AAA accessibility standards. Use when the user wants to verify if their color combinations are accessible, check contrast between text and background colors, or audit a palette for accessibility.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(5)

  • SKILL.md3.3 KB
  • scripts/contrast-check.js1.3 KB
  • scripts/contrast-check.sh375 B
  • scripts/package-lock.json1.3 KB
  • scripts/package.json135 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Contrast Check

Check color pairs against WCAG 2.1 contrast requirements. Pass in hex colors and get contrast ratios with AA/AAA pass/fail results for both normal and large text.

When to Use

  • Checking if a text color is readable against a background color
  • Auditing an entire color palette for accessibility compliance
  • Verifying colors extracted from a design meet WCAG standards

How It Works

  1. Takes a list of hex colors as arguments
  2. Computes the contrast ratio for every foreground/background pair
  3. Tests each pair against WCAG 2.1 AA and AAA thresholds for normal and large text

WCAG thresholds:

  • AA normal text — ratio >= 4.5:1
  • AA large text — ratio >= 3:1
  • AAA normal text — ratio >= 7:1
  • AAA large text — ratio >= 4.5:1

Usage

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

Arguments:

  • Two or more hex colors (required). With or without # prefix.

Examples:

# 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"

Output

{
  "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
  }
}
FieldTypeDescription
foregroundStringForeground (text) color
backgroundStringBackground color
ratioNumberContrast ratio (e.g. 16.57 means 16.57:1)
aa.normalBooleanPasses WCAG AA for normal text (>= 4.5:1)
aa.largeBooleanPasses WCAG AA for large text (>= 3:1)
aaa.normalBooleanPasses WCAG AAA for normal text (>= 7:1)
aaa.largeBooleanPasses WCAG AAA for large text (>= 4.5:1)

Present Results to User

After checking, present a table:

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.

Flag any failing pairs and suggest fixes (darken/lighten the color to reach the threshold).

Troubleshooting

Invalid color — Colors must be valid hex values (3 or 6 digits, with or without #).

Pairing with image-analysis — Extract colors from a design with the image-analysis skill first, then pipe the hex values into this skill to audit accessibility.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Multi-model agent orchestration using specialized agents for planning, coding, research, math/science, visual analysis, and adversarial review. Use when tasks are complex enough to benefit from different models' strengths, when you want adversarial review to catch blind spots, or when coordinating multi-step workflows across agent roles. Triggers on complex projects, multi-step tasks, architecture decisions, or when explicitly requested.

中文简介正在准备中。当前显示原文说明。

pascalorg/skills982026年9月11日 更新

Audit a .glb or .gltf and make it small, correct, and fast to load in a browser, with a measured before/after report. Use when a model is "too big" or "slow to load", when the user asks to "optimize this GLB", "compress this glTF", or "export for web", or when they mention Draco, meshopt, gltfpack, KTX2, Basis, texture VRAM, draw calls, or a Blender / CAD / photogrammetry / Pascal export headed for Three.js, React Three Fiber (drei useGLTF), Babylon.js, or model-viewer. Covers inspection, spec validation, geometry and texture compression, scene-graph cleanup, and the correctness checks (metres, Y-up, node names, animations, PBR fidelity, alpha modes, vertex colors) that must not regress. Not for editing or modelling geometry, authoring or laying out a scene, generating 3D from text or images, converting from FBX/OBJ/CAD, or debugging a runtime frame rate that has nothing to do with asset size.

中文简介正在准备中。当前显示原文说明。

pascalorg/skills982026年9月11日 更新

Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors", "extract colors from this image", "implement this design", or "get the color palette".

中文简介正在准备中。当前显示原文说明。

pascalorg/skills982026年9月11日 更新

Compare two images pixel-by-pixel and get a visual diff. Use when the user wants to compare their implementation against a design, spot differences between two screenshots, or verify visual regression.

中文简介正在准备中。当前显示原文说明。

pascalorg/skills982026年9月11日 更新

Extract text from images using OCR. Use when the user shares a screenshot and you need to read the text content, copy UI labels, or extract copy from a design mockup.

中文简介正在准备中。当前显示原文说明。

pascalorg/skills982026年9月11日 更新

Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI, reviewing design quality, choosing design tokens, or making any visual design decision.

中文简介正在准备中。当前显示原文说明。

pascalorg/skills982026年9月11日 更新

查看 pascalorg 的全部技能

报告此技能的问题