What it does
Reads the dark mode variant of the color palette, whether that's a separate theme.json dark palette or CSS behind a prefers-color-scheme media query, and calculates WCAG contrast ratios for the same foreground/background pairings checked in light mode. Dark palettes often get far less design attention than the light palette they're derived from, so failures here are common and easy to miss without a dedicated check.
Install
This skill isn't packaged in an installable registry. It's a plain SKILL.md file you can copy directly. Copy it from the SKILL.md tab and save it at the path for your assistant:
Use it in your AI assistant
Claude Code
.claude/skills/dark-mode-contrast-checker/ (or ~/.claude/skills/dark-mode-contrast-checker/ for all projects)
GitHub Copilot (VS Code)
.github/skills/dark-mode-contrast-checker/
OpenAI Codex
.codex/skills/dark-mode-contrast-checker/
Cursor
.cursor/skills/dark-mode-contrast-checker/ (or ~/.cursor/skills/dark-mode-contrast-checker/ globally)
Compatibility
Requires the site to have an actual dark mode implementation (a theme.json dark palette or a CSS media query) to check.
The complete SKILL.md for this skill:
---
name: dark-mode-contrast-checker
description: Use when a user wants dark mode colors checked for accessibility, mentions a dark theme, or wants contrast verified separately from the light mode palette.
---
# Dark Mode Contrast Checker
## When to use
The site has a dark mode variant (theme.json dark palette or a prefers-color-scheme CSS block) and the user wants it checked for WCAG contrast, since dark palettes are frequently under-tested compared to the light default.
## Procedure
1. Locate the dark mode color definitions, whether a separate theme.json palette entry, CSS custom property overrides, or a prefers-color-scheme media query block.
2. Identify the same foreground/background pairings that matter in light mode: body text, headings, buttons, links, form fields, now using the dark values.
3. Calculate the WCAG contrast ratio for each pairing under dark mode specifically, don't assume the light mode result carries over.
4. Flag pairs below 4.5:1 for normal text or 3:1 for large text and UI components, listing the exact dark-mode hex values involved.
5. Pay particular attention to pure white text on near-black backgrounds and muted "subtle" text colors, both common dark-mode-specific failure patterns.
6. Suggest adjustments that preserve the dark mode's visual character rather than just inverting the light mode fix.
## Guardrails
- Don't assume a color pairing that passes in light mode automatically passes in dark mode, they use different values and must be checked independently.
- Flag suggested changes for approval rather than editing the dark palette directly, since dark mode is often a secondary design surface with its own stakeholders.