accessibility-contrast-auditlisted

Audits color contrast on a Figma page against WCAG 2.1 AA and AAA, then writes a clean, designed report onto a brand-new page in the same file. For every top-level frame it scores text contrast (1.4.3 AA and 1.4.6 AAA, with the large-text exception) and flags low-contrast UI strokes/borders (1.4.11, 3:1), giving each frame a PASS/FAIL verdict. The report lists one row per frame with pass/fail badges and a clickable link that jumps straight to that frame, plus its node address printed underneath — so findings are easy to act on without cluttering the layout. Triggers when a designer wants to check contrast or accessibility before handoff — phrasings like "check the color contrast on this page", "run a WCAG contrast audit", "is this design AA compliant?", "which frames pass AA and AAA?", "audit contrast and write up the results", "are my text colors accessible?", "find low-contrast text", "contrast check before handoff", or "make me an accessibility contrast report". Reads the designs and creates a report page
Hosseinkm89/figma-skills · ★ 0 · Web & Frontend · score 72

Install: claude install-skill Hosseinkm89/figma-skills

# Accessibility Contrast Audit Measure color contrast across a page the way WCAG does, and drop the findings into a tidy report page the whole team can read — with a click-to-jump link to every frame that needs attention. ## When this fires A designer says something like: - "Check the color contrast on this page." - "Is this screen AA compliant? What about AAA?" - "Which of these frames pass and which fail?" - "Run a contrast audit before I hand off." - "Find the low-contrast text in this file." - "Make me an accessibility contrast report." ## What it does (in plain terms) For the **current page**, it looks at every top-level frame and: 1. **Scores text contrast.** Each run of text is compared against the background color sitting behind it, then checked against the WCAG ratios: - **AA** (1.4.3): 4.5:1 for normal text, 3:1 for large text. - **AAA** (1.4.6): 7:1 for normal text, 4.5:1 for large text. - *Large* means 24px+ regular or 18.66px+ bold (WCAG's 18pt / 14pt-bold rule). 2. **Flags UI/non-text contrast.** Visible solid strokes — input borders, dividers, button outlines, icon strokes — are checked against the 3:1 non-text rule (1.4.11). This is a **heuristic flag for manual review**, not a guarantee; decorative graphics are out of scope (see references). 3. **Gives each frame a verdict.** A frame passes a level only if *every* text run inside it meets that level. Results roll up to one PASS / FAIL / N/A badge per level, per frame. 4. **Wr