Contrast Checker Skill

SkillDev tools

Check color contrast ratios for WCAG compliance

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the Contrast Checker Skill skill

What this skill tells your AI

The instructions your AI receives, as published by a5c-ai/babysitter in library/specializations/ux-ui-design/skills/contrast-checker/SKILL.md and read by ahel’s review.

Purpose

Calculate and validate color contrast ratios according to WCAG 2.1 guidelines, ensuring text readability and accessibility compliance.

Capabilities

Calculate WCAG contrast ratios
Validate normal text (4.5:1) and large text (3:1) requirements
Check AA and AAA compliance levels
Suggest passing color alternatives
Batch check multiple color pairs
Analyze color palettes for contrast issues

Target Processes

accessibility-audit.js (colorContrastVisualAnalysisTask)
component-library.js (colorSystemDesignTask)
design-system.js

Integration Points

color-contrast-checker library
polished.js
chroma.js

Input Schema

{
  "type": "object",
  "properties": {
    "colorPairs": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "foreground": { "type": "string" },
          "background": { "type": "string" },
          "textSize": { "type": "string", "enum": ["normal", "large"] }
        }
      }
    },
    "targetLevel": {
      "type": "string",
      "enum": ["AA", "AAA"],
      "default": "AA"
    },
    "suggestAlternatives": {
      "type": "boolean",
      "default": true
    },
    "palette": {
      "type": "object",
      "description": "Color palette to analyze for contrast"
    }
  },
  "required": ["colorPairs"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "results": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "foreground": { "type": "string" },
          "background": { "type": "string" },
          "ratio": { "type": "number" },
          "passesAA": { "type": "boolean" },
          "passesAAA": { "type": "boolean" },
          "passesAALarge": { "type": "boolean" },
          "alternatives": { "type": "array" }
        }
      }
    },
    "summary": {
      "type": "object",
      "properties": {
        "totalPairs": { "type": "number" },
        "passingAA": { "type": "number" },
        "passingAAA": { "type": "number" },
        "failing": { "type": "number" }
      }
    },
    "paletteAnalysis": {
      "type": "object",
      "description": "Full palette contrast matrix"
    }
  }
}

Usage Example

const result = await skill.execute({
  colorPairs: [
    { foreground: '#333333', background: '#ffffff', textSize: 'normal' },
    { foreground: '#666666', background: '#f0f0f0', textSize: 'large' }
  ],
  targetLevel: 'AA',
  suggestAlternatives: true
});

Signals

GitHub stars: 2k
Forks: 112
Last commit: Sep 2026

Advanced

Item type: skill
Key: contrast-checker
Source: github.com/a5c-ai/babysitter

github.com/a5c-ai/babysitter