contrast-checker
SolidCheck color contrast ratios for WCAG compliance
Install
Quality Score: 95/100
Skill Content
Details
- Author
- a5c-ai
- Repository
- a5c-ai/babysitter
- Created
- 4 months ago
- Last Updated
- today
- Language
- JavaScript
- License
- MIT
Similar Skills
Semantically similar based on skill content — not just same category
color-accessibility-audit
Analyze color combinations for readability and accessibility compliance per WCAG 2.1/2.2 standards (Contrast Minimums 1.4.3 and Enhanced Contrast 1.4.6). Use this skill whenever the user shares a design, color palette, CSS, HTML, Tailwind config, theme file, screenshot of a UI, or mentions anything about text being hard to read, colors clashing, poor contrast, accessibility compliance (WCAG), or asks "can you check if these colors work together?" Also trigger when reviewing any frontend code, design tokens, or style sheets — even if the user doesn't explicitly ask about contrast. If colors are involved, check them. Covers: hex codes, RGB, HSL, named CSS colors, Tailwind classes, design tool exports, and UI screenshots. Includes color blindness simulation for Protanopia, Deuteranopia, and Tritanopia.
color-palette-generator
Generate accessible color palettes with WCAG compliance
color-contrast-checker
Validate color contrast checker operations. Auto-activating skill for Frontend Development. Triggers on: color contrast checker, color contrast checker Part of the Frontend Development skill category. Use when working with color contrast checker functionality. Trigger with phrases like "color contrast checker", "color checker", "color".
accessibility-audit
Audit UI code for WCAG 2.1 AA compliance — color contrast, keyboard navigation, ARIA roles, focus management, and screen reader compatibility. Use when the user asks to "check accessibility", "make this accessible", "WCAG audit", "a11y review", or before marking any public-facing UI as done. Do NOT use for quick pre-delivery checks — use output-enforcement for that. This skill goes deeper: it covers ARIA semantics, focus order, and live regions.
accessibility-contrast-audit
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