🔆

Accessibility Contrast Audit

Design & Media · by AIDiveForge · Apr 20, 2026 · Beginner

Walk a page's color tokens and flag every pair that fails WCAG AA, with a suggested minimal adjustment to pass.

🧠 Why it works

Manual contrast audits miss combinations because they only check the pairs that show up on-screen at the moment of review. Walking the tokens exhaustively catches the edge-case pages (error states, hover states) that a human QA rarely visits.

⚙️ How it works

Parse tokens + all text/background combinations declared in CSS. 2. Compute WCAG contrast ratio for each pair (relative luminance formula). 3. Flag failures with their required minimum (4.5 for normal text, 3.0 for large text). 4. For each failure, search nearby hex values in HSL space for the minimum lightness adjustment that brings the ratio above threshold. 5. Emit a markdown report with a fix-suggestion column and a ready-to-paste CSS patch at the bottom.

Description

Input: a CSS file, a design-tokens JSON, or a rendered URL. Output: a list of every color pair used together (text on background) with their contrast ratio and WCAG AA / AAA pass/fail status. For each failure, proposes the smallest hex delta that would pass while staying close to the original hue.

Install this skill

A Claude skill is a skill.md file with YAML frontmatter and a markdown body. Drop the file into your tool of choice — or pick a different format if you use Cursor, Windsurf, Copilot, or something else.

Format Download skill.md

Quick install — paste into your terminal

mkdir -p ~/.claude/skills/accessibility-contrast-audit \
  && curl -L https://aidiveforge.com/skill/accessibility-contrast-audit.skill-md \
       -o ~/.claude/skills/accessibility-contrast-audit/skill.md

Save to ~/.claude/skills/accessibility-contrast-audit/skill.md

🧠 Why it works

⚙️ How it works

Description

Install this skill

Recommended Use

Forge Auto-recommended matches

Tools

Report compatibility

Suggest a pairing