contrast-checker

Solid

Check color contrast ratios for WCAG compliance

AI & Automation 1,160 stars 71 forks Updated today MIT

Install

View on GitHub

Quality Score: 95/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 ```json { "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 ```json { "type": "object", "properties": { "results": { "type": "array", "items": { ...

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

Web & Frontend Listed

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.

24 Updated 2 days ago
georgekhananaev
AI & Automation Solid

color-palette-generator

Generate accessible color palettes with WCAG compliance

1,160 Updated today
a5c-ai
AI & Automation Solid

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".

2,274 Updated today
jeremylongshore
AI & Automation Listed

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.

3 Updated today
phamlongh230-lgtm
Web & Frontend Listed

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

0 Updated 2 days ago
Hosseinkm89