Liquid Theme A11Y

The liquid-theme-a11y skill applies accessibility-focused styling to Liquid templates, ensuring visual consistency and compliance with web standards across dynamic content. It automatically adjusts color contrast, font sizes, and layout spacing to enhance readability for users with visual impairments.

When to use it

• Deploying e-commerce sites built on Shopify or similar platforms that require WCAG 2.1 AA compliance.
• Creating blog themes where text-heavy content needs high-contrast modes for dyslexic readers.
• Customizing dashboard interfaces to ensure data tables and forms are legible in dark mode.
• Preparing legacy Liquid templates for public release without manual CSS auditing.

Key capabilities

• Enforces minimum color contrast ratios between text and background elements.
• Dynamically scales font sizes based on viewport width and user preferences.
• Adds semantic spacing to form inputs and navigation menus for touch accessibility.
• Supports dark mode transitions that preserve legibility without losing brand identity.

Example prompts

• "Apply liquid-theme-a11y to my Shopify store's product page template to fix low contrast on sale badges."
• "Modify the header layout using liquid-theme-a11y so it remains readable when users enable high-contrast browser settings."
• "Integrate liquid-theme-a11y into a custom blog theme to ensure all body text meets WCAG AA standards automatically."

Tips & gotchas

Ensure your Liquid template structure uses semantic tags (like <h1> through <h6>) before applying this theme, as the styling relies on proper heading hierarchy. While it fixes visual accessibility, it does not replace the need for ARIA labels or keyboard navigation testing.