Dark Mode Contrast Checker

What this skill does

Scans a Tailwind project for text-on-background class pairs used in dark mode (dark:text-* dark:bg-*) and computes WCAG AA contrast for each pair. Flags every pair below 4.5:1 (regular text) or 3.0:1 (large text).

Inputs

• repo_dir: project root.
• tailwind_config: path to tailwind.config.{js,ts}.
• Optional glob: source glob (default src/**/*.{jsx,tsx,html}).

Steps

1. Load the Tailwind config with node -e "console.log(JSON.stringify(require('tailwindcss/resolveConfig')(require('<tailwind_config>'))))" to get the resolved color palette.
2. Walk source files matching glob and find className strings. Extract tokens prefixed dark:, including dark:text-*, dark:bg-*, dark:border-*.
3. For each component or DOM node, infer the dominant dark text color and dark background by token order in the className.
4. Resolve each Tailwind token to a hex color via the resolved palette (e.g., dark:bg-slate-900 -> #0f172a).
5. Compute relative luminance per WCAG: convert hex to sRGB, linearize, weighted sum.
6. Compute contrast ratio: (L1 + 0.05) / (L2 + 0.05) with L1 the lighter.
7. Classify against thresholds: pass-AAA >= 7.0; pass-AA >= 4.5; pass-AA-large >= 3.0; fail below.
8. Cite each failing pair with file:line and the suggested replacement (e.g., bump dark:text-slate-400 to dark:text-slate-200).
9. Emit a markdown report grouping by failure tier.

Output

dark-contrast-report.md with a summary header (totals per tier), a "Failures" table (file:line, fg, bg, ratio, suggested fix), and a "Borderline" section for pairs barely passing AA.

Verification

Plug a sample of failing pairs into an external tool (https://webaim.org/resources/contrastchecker/) and confirm the computed ratio matches within 0.05. After applying a suggested replacement, re-run the audit and confirm the pair moves from fail to pass-AA. If the resolved palette has overrides via extend.colors, validate by spot-checking three custom token resolutions.

Edge cases

• Inline styles (style={{ color: '#fff' }}): the audit covers Tailwind tokens only; surface a note for files using inline styles heavily.
• Gradients: use the dominant stop or refuse to evaluate; do not pretend a single ratio captures gradient text.
• Tokens behind variants like group-hover:dark:text-*: include them with the parent's variant noted in the report.
• Custom darkMode: 'class' vs 'media': works for both; pair detection is independent of toggle strategy.