theme-evaluation_skill

Overview

This skill evaluates visual themes for accessibility, contrast, and common design issues with a focus on WCAG AA/AAA contrast compliance. I run automated color-contrast checks, inspect key CSS selectors and theme palettes, and produce actionable fixes and code snippets. The goal is a concise pass/fail summary, prioritized critical failures, and practical recommendations you can apply quickly.

How this skill works

I load a theme and its palette colors, compute contrast ratios for critical pairs (body, header, footer, links, buttons), and flag any violations against WCAG thresholds. I also inspect hero overlays, navigation, cards, forms, and dark mode variants for readability, focus visibility, and motion concerns. Output includes a short summary, a list of critical failures, warnings, and ready-to-use CSS fixes.

When to use it

• Auditing themes before release to ensure WCAG AA compliance
• Checking color palettes and contrast when creating or updating a brand palette
• Reviewing hero images, navigation, footer and component styling for readability
• Verifying dark mode and responsive behavior for visual accessibility
• Troubleshooting customer reports about unreadable text or invisible controls

Best practices

• Target 4.5:1 for normal text and 3:1 for large text; aim for 7:1 for AAA where feasible
• Use overlays (rgba black/white) on hero images to guarantee text contrast
• Keep body text >=16px with line-height >=1.5 for readability
• Provide visible focus indicators and respect prefers-reduced-motion
• Avoid conveying meaning by color alone; add icons, labels, or underlines for links

Example use cases

• Run a palette audit to find failing color pairs and receive suggested swaps or shades
• Generate a contrast report for the brisbane theme showing critical failures and fixes
• Apply provided CSS snippets to make outline buttons and footer links readable on images
• Validate dark mode generation and adjust card/background contrasts
• Document accessibility fixes to hand off to designers or front-end engineers