Color Contrast Auditor

What it does

The color-contrast-auditor skill analyzes web pages to identify text and background color combinations that fail accessibility standards. It specifically checks if foreground and background colors meet the required contrast ratios for readability, helping developers ensure their interfaces are inclusive for users with visual impairments.

When to use it

• Audit existing landing pages before public release to catch low-contrast text errors early.
• Validate form labels, button text, and error messages against WCAG guidelines.
• Test dark mode implementations where color inversion often leads to insufficient contrast.
• Integrate into the development workflow to automatically flag accessibility issues during UI updates.

Key capabilities

• Scans web pages for text elements with poor visibility against their backgrounds.
• Calculates specific contrast ratios between foreground and background colors.
• Highlights non-compliant areas that violate standard accessibility thresholds.

Example prompts

• "Run a color-contrast audit on my current homepage and list any text elements failing WCAG AA standards."
• "Identify all buttons with low contrast ratios so I can adjust their styling for better accessibility."
• "Check the error messages on my login form to ensure they are readable against the background."

Tips & gotchas

Ensure your AI agent has access to the live URL or a snapshot of the page being audited, as it cannot analyze local files directly. While this tool highlights contrast issues, it does not replace a full manual accessibility review which includes other factors like semantic HTML and focus states.