What it does
Reads the color values a theme actually renders with (theme.json palette, block-level color settings, or stylesheet variables), computes the WCAG contrast ratio for each foreground/background pairing in use, and flags anything below 4.5:1 for normal text or 3:1 for large text and UI components. Produces a list of specific element/color pairs to fix rather than a general accessibility score.
Install
This skill isn't packaged in an installable registry. It's a plain SKILL.md file you can copy directly. Copy it from the SKILL.md tab and save it at the path for your assistant:
Use it in your AI assistant
Claude Code
.claude/skills/color-contrast-checker/ (or ~/.claude/skills/color-contrast-checker/ for all projects)
GitHub Copilot (VS Code)
.github/skills/color-contrast-checker/
OpenAI Codex
.codex/skills/color-contrast-checker/
Cursor
.cursor/skills/color-contrast-checker/ (or ~/.cursor/skills/color-contrast-checker/ globally)
Compatibility
Works best on block themes with a theme.json palette. Classic themes require the agent to read color values directly from the stylesheet.
The complete SKILL.md for this skill:
---
name: color-contrast-checker
description: Use when a user wants color contrast checked or fixed, mentions WCAG, accessibility compliance, or asks whether text is readable against its background.
---
# Color Contrast Checker
## When to use
The user wants to verify or fix text/background color combinations for accessibility, or is preparing for an accessibility audit.
## Procedure
1. Gather the site's actual color values: theme.json palette entries, plus any block-level or custom CSS color overrides in active use.
2. Identify every foreground/background pairing that appears in rendered content: body text, headings, buttons, links, form fields.
3. Calculate the WCAG contrast ratio for each pairing using the standard relative-luminance formula.
4. Flag pairs below 4.5:1 for normal text or 3:1 for large text (18pt+/14pt bold+) and UI components, listing the exact hex values involved.
5. For each failure, suggest the smallest color adjustment that clears the threshold while staying visually close to the original.
6. Re-check any suggested replacement against every other pairing it appears in, not just the one that failed.
## Guardrails
- Don't change brand colors without flagging the tradeoff, some contrast fixes visibly shift brand identity and need a human decision.
- Report ratios as numbers (e.g. "3.2:1, needs 4.5:1"), not just pass/fail, so the user can judge how close it is.