Color Accessibility

What it does

This skill enables AI agents to analyze color combinations in web designs and evaluate them against WCAG 2.1 standards for contrast and accessibility. It ensures text and graphical elements are legible for users with visual impairments by calculating luminance ratios automatically.

When to use it

• Validating new UI mockups before handoff to developers to catch contrast issues early.
• Auditing existing websites to identify non-compliant color schemes that hinder readability.
• Generating accessible color palettes that meet specific WCAG AA or AAA requirements.
• Integrating into automated testing pipelines for frontend accessibility compliance.

Key capabilities

• Calculates relative luminance for foreground and background colors.
• Determines contrast ratios between text and backgrounds.
• Flags violations of WCAG 2.1 Level AA and AAA guidelines.
• Provides specific feedback on which color pairs fail accessibility checks.

Example prompts

• "Analyze this hex color palette: #333333 on #FFFFFF, #666666 on #CCCCCC, and #000000 on #FFFF00. Which ones pass WCAG AA?"
• "Generate a set of accessible button colors that maintain high contrast against a light gray background (#F5F5F5)."
• "Audit the color scheme of this design snippet for compliance with WCAG 2.1 standards and list any failing elements."

Tips & gotchas

Ensure you provide valid hex codes or RGB values when asking for analysis to avoid inaccurate calculations. Remember that while this skill checks contrast ratios, it does not evaluate other accessibility factors like color blindness simulation or semantic HTML usage.