contrast-check

コントラストチェック

色の組み合わせが WCAG 2.1 のコントラスト要件を満たしているか確認します。16進数カラーを渡すと、通常テキストと大きなテキストの両方について、AA／AAA の合否結果とコントラスト比を取得できます。

使用する場面

• テキストカラーが背景色に対して読みやすいか確認する
• カラーパレット全体がアクセシビリティ要件を満たしているか監査する
• デザインから抽出した色が WCAG の基準を満たしているか検証する

仕組み

1. 引数として16進数カラーのリストを受け取ります
2. 前景色と背景色のすべての組み合わせについて、コントラスト比を計算します
3. 各組み合わせを、通常テキストと大きなテキストの 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] ...

引数：

• 2つ以上の16進数カラー（必須）。# プレフィックスの有無は問いません。

例：

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

基準に達していない組み合わせを明示し、基準値に達するよう色を暗くする、または明るくする修正案を提示します。

トラブルシューティング

無効なカラー — カラーは有効な16進数値である必要があります（3桁または6桁。# の有無は問いません）。

image-analysis との組み合わせ — まず image-analysis スキルでデザインから色を抽出し、16進数値をこのスキルに渡してアクセシビリティを監査します。