etewiah/property_web_builder
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
FAQ
I check WCAG 2.1 AA thresholds (4.5:1 normal text, 3:1 large text) and optionally AAA (7:1 normal text). UI components are evaluated at 3:1.
Can you suggest specific color replacements?
Yes. I recommend concrete hex replacements or darker/lighter shades and include ready-to-use CSS fixes to update overlays, buttons, footers, and component colors.
4 skills
This skill evaluates theme accessibility and WCAG contrast, identifying color, typography, and dark-mode issues to improve compliance and UX.
This skill helps you create and manage seed packs for PropertyWebBuilder, enabling quick setup of tenant sites with realistic data.
This skill helps you create and customize themes for PropertyWebBuilder, handling registration, inheritance, palettes, and per-website styling.
This skill helps you set up and run Playwright e2e tests and Lighthouse audits to ensure reliable UI and performance.
