Automates comprehensive dark mode audits by emulating color schemes and validating WCAG 2.1 contrast ratios.
The Dark Mode Tester skill for Claude Code provides a standardized workflow for auditing web accessibility across light and dark color schemes. By leveraging the Playwright MCP server and Chrome DevTools Protocol (CDP), it emulates the 'prefers-color-scheme' media feature to capture visual differences, compute WCAG 2.1 contrast ratios for all visible text, and flag hardcoded colors that fail to adapt to theme changes. It is an essential utility for frontend developers and QA engineers seeking to ensure a seamless, compliant, and accessible user experience regardless of system-level theme preferences.
Key Features
01Automates visual regression testing with side-by-side screenshots
021 GitHub stars
03Identifies hardcoded CSS colors that ignore system theme changes
04Validates color-scheme meta tags and root CSS declarations
05Calculates WCAG 2.1 contrast ratios for all visible text elements
06Emulates 'prefers-color-scheme' via Chrome DevTools Protocol (CDP)
Use Cases
01Auditing third-party websites or design systems for dark mode readiness
02Verifying WCAG 2.1 accessibility compliance for dark mode implementations
03Debugging UI components that remain unreadable when a user switches themes
