skills.rest
anouar1991
anouar1991COMMUNITY
Explore all skills by this author →
GitHub

dark-mode-tester

Audit dark mode rendering and color contrast against WCAG 2.1 guidelines.

1|Updated Jan 9, 2026
Search Tags:#a11y#wcag#contrast#playwright#cdp#dark-mode#color-scheme
One-click install
npx skills add https://github.com/anouar1991/binaryPetsClaude --skill dark-mode-tester
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dark-mode-tester
Source: https://github.com/anouar1991/binaryPetsClaude/tree/main/plugins/playwright-toolkit/skills/dark-mode-tester
Command: npx skills add https://github.com/anouar1991/binaryPetsClaude --skill dark-mode-tester

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill audits dark mode rendering, checks color-scheme meta and CSS, and reports contrast and hardcoded color issues to ensure accessible UI in light/dark themes.

Core Features & Use Cases

  • Emulates prefers-color-scheme via CDP to compare light and dark modes.
  • Captures screenshots and analyzes text colors and contrast ratios against WCAG 2.1 guidelines.
  • Detects hardcoded colors that do not respond to theme changes and validates color-scheme declarations.
  • Produces a remediation-ready report that highlights failures and suggested fixes.
  • Use Case: QA engineers validating a design system across themes in CI pipelines.

Quick Start

Run the audit against a target URL to evaluate color-scheme support, generate contrast reports, and identify hardcoded colors that ignore scheme changes.

Frequently Asked Questions about dark-mode-tester

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit dark mode contrast for WCAG 2.1 compliance?▼

Audit dark mode rendering by emulating prefers-color-scheme via CDP, capturing text colors, and calculating contrast ratios for normal and large text against WCAG 2.1 guidelines to flag failing elements.

What is the best way to detect hardcoded colors that ignore color-scheme changes?▼

Detect hardcoded colors that ignore color-scheme changes by emulating light and dark themes via CDP and analyzing the rendered output. This validates CSS color-scheme declarations and flags elements that fail to respond to theme changes.

Do I need Playwright to test prefers-color-scheme emulation?▼

Yes, testing prefers-color-scheme emulation requires Chromium-based Playwright and CDP to toggle dark and light modes. This setup captures screenshots and analyzes text colors to measure contrast ratios against WCAG 2.1 guidelines.

Can I validate color-scheme meta tags and CSS in CI pipelines?▼

Yes, you can validate color-scheme meta tags and CSS in CI pipelines by running an automated audit against a target URL. This evaluates color-scheme support, generates contrast reports, and identifies hardcoded colors for remediation.

How does CDP emulation work for dark mode accessibility testing?▼

CDP emulation for dark mode accessibility testing works by overriding prefers-color-scheme settings in a Chromium-based Playwright environment. It captures screenshots and analyzes text colors to produce a remediation-ready report of contrast failures.

Related Skills

Explore More Software Engineering Skills→
Camilo8902Camilo8902

dark-mode-implementer

Implement dark and light mode theming with CSS variables, Tailwind CSS, and React context.

Community
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
adityaarsharmaadityaarsharma
2

orbit-designer-dark-mode

Automate dark mode audits for WordPress plugins with CSS and WCAG AA checks.

Community
Intermediate
bdbchbdbch
2

accessibility-review

Audit web applications for WCAG 2.1/2.2 accessibility compliance in Chrome.

Community
Advanced