skills.rest
thingperson
thingpersonCOMMUNITY
Explore all skills by this author →
GitHub

theme-check

Audit theme color palettes in app/globals.css for WCAG contrast compliance.

Updated Apr 1, 2026
Search Tags:#theming#accessibility#a11y#css#audit#wcag#contrast
One-click install
npx skills add https://github.com/thingperson/pileofshame --skill theme-check-thingperson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-check
Source: https://github.com/thingperson/pileofshame/tree/main/.claude/skills/theme-check
Command: npx skills add https://github.com/thingperson/pileofshame --skill theme-check-thingperson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit all themes for WCAG contrast ratios, text legibility, and color distinguishability. Run after theme changes or before major deploys.

Core Features & Use Cases

  • Extract CSS variable definitions from each theme block in app/globals.css
  • Compute luminance-based contrast to verify accessibility across themes
  • Validate text, background, and accent color contrasts and ensure status colors remain distinguishable across themes

Quick Start

Analyze app/globals.css to enumerate themes and verify contrast ratios using the provided algorithm.

Frequently Asked Questions about theme-check

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

FAQPage Schema
How do I audit CSS theme color palettes for WCAG contrast compliance?▼

To audit CSS theme color palettes for WCAG contrast compliance, extract CSS variable definitions from each theme block and compute luminance-based contrast ratios to verify text legibility and flag violations.

What's the best way to check text legibility across multiple CSS themes?▼

Checking text legibility across multiple CSS themes involves validating text, background, and accent color contrasts to ensure status colors remain distinguishable and meet accessibility standards across all defined theme blocks.

When do I need to run a WCAG contrast audit on my CSS variables?▼

You need to run a WCAG contrast audit on your CSS variables after making theme changes or before major deploys to ensure all color combinations maintain proper luminance-based contrast ratios.

Does the contrast audit verify that status colors remain distinguishable across different themes?▼

Yes, the contrast audit verifies that status colors remain distinguishable across themes by computing luminance-based contrast ratios and validating accent color contrasts alongside text and background color compliance.

How does luminance-based contrast computation work for CSS color accessibility?▼

Luminance-based contrast computation for CSS color accessibility works by extracting CSS variable values from theme blocks and calculating contrast ratios to flag any combinations that violate WCAG compliance standards.

Related Skills

Explore More Design & Creative Skills→
petbrainspetbrains
13

frontend-color-system

Generate accessible color palettes and themes from brand colors with WCAG contrast validation.

Official
Intermediate
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-forced-colors

Detect forced-colors accessibility failures in rendered web pages.

Community
Intermediate