About

Imported from terminalskills/skills (skills/contrast-check/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill contrast-check. Copyright stays with the author (MIT).

Contrast Check

Name: contrast-check
Author: terminalskills

Overview

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.

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

Instructions

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

Run the script with two or more hex colors (with or without # prefix):

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

The script outputs JSON with contrast ratios and pass/fail results:

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

After checking, present a table to the user:

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

Examples

Example 1: Check a dark theme header against white text

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

Output:

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

Example 2: Audit a full brand palette

bash <skill-path>/scripts/contrast-check.sh "#1a1a2e" "#e94560" "#ffffff" "#3d83f7" "#bdbdbd"

The script checks all foreground/background combinations and reports which pairs fail AA or AAA. For example, #e94560 on #ffffff yields a ratio of 3.94:1 which fails AA for normal text but passes for large text.

Guidelines

Colors must be valid hex values (3 or 6 digits, with or without #).
Pair with the image-analysis skill to extract colors from a design first, then pipe the hex values into this skill to audit accessibility.
When a pair fails, suggest darkening or lightening one of the colors to meet the target ratio.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/terminalskills-skills-contrast-check/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

terminalskills-skills-contrast-check.ocm.jsonjson

{
  "ocm": "1",
  "id": "terminalskills-skills-contrast-check",
  "kind": "skill",
  "name": "contrast-check",
  "description": "Check color contrast ratios for WCAG accessibility compliance. Use when: auditing UI components for accessibility, validating color schemes meet AA/AAA standards, fixing low-contrast text in designs.",
  "publisher": "terminalskills",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "legal"
    ],
    "tags": [
      "skill-md",
      "accessibility",
      "wcag",
      "contrast",
      "color",
      "design",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Check color contrast ratios for WCAG accessibility compliance. Use when: auditing UI components for accessibility, validating color schemes meet AA/AAA standards, fixing low-contrast text in designs."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/terminalskills/skills",
      "path": "skills/contrast-check/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/terminalskills/skills/blob/HEAD/skills/contrast-check/SKILL.md",
      "key": "terminalskills/skills/skills/contrast-check/SKILL.md"
    },
    "compatibility": "Node.js 18+",
    "license": "MIT"
  },
  "instructions": "# Contrast Check\n\n## Overview\n\nCheck 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.\n\n- Checking if a text color is readable against a background color\n- Auditing an entire color palette for accessibility compliance\n- Verifying colors extracted from a design meet WCAG standards\n\n## Instructions\n\n1. Takes a list of hex colors as arguments\n2. Computes the contrast ratio for every foreground/background pair\n3. Tests each pair against WCAG 2.1 AA and AAA thresholds for normal and large text",
  "cost": {
    "context_tokens": 709
  }
}

Fetch it by URL: GET /api/v1/registry/terminalskills-skills-contrast-check/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.