Contrast Checker Skill

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
});