無料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.

pascalorg/skills

インストール方法を見る

含まれるファイル（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（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

Takes a list of hex colors as arguments
Computes the contrast ratio for every foreground/background pair
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
  }
}

Field	Type	Description
foreground	String	Foreground (text) color
background	String	Background color
ratio	Number	Contrast ratio (e.g. 16.57 means 16.57:1)
aa.normal	Boolean	Passes WCAG AA for normal text (>= 4.5:1)
aa.large	Boolean	Passes WCAG AA for large text (>= 3:1)
aaa.normal	Boolean	Passes WCAG AAA for normal text (>= 7:1)
aaa.large	Boolean	Passes 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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

agent-collaboration

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。