Dark mode maintains accessible contrast

A dark mode implementation that inverts colors without verifying contrast ratios often swaps a passing light-mode palette for a failing dark-mode one. WCAG 2.2 SC 1.4.3 (Contrast Minimum) applies equally in both color modes — there is no dark mode exemption. Section 508 2018 Refresh 302.7 governs visual accessibility regardless of theme. Common failure: a link color of #3b82f6 (blue-500) passes on white (#ffffff, ratio 3.94:1 — too low for body text but acceptable for large text) but the same blue on a dark background of #111827 improves to 5.9:1. However, secondary text #9ca3af (gray-400) on #111827 produces only 4.0:1 — failing for normal-weight body text under 18px. Dark modes added as afterthoughts frequently have these partial failures concentrated in secondary text and muted labels.

Test dark mode colors explicitly using the same tools as light mode. In Tailwind or CSS custom properties, define dark-mode tokens separately and validate both sets.

@media (prefers-color-scheme: dark) {
  :root {
    --background: #111827;    /* gray-900 */
    --text-primary: #f9fafb;  /* gray-50, 18.1:1 on bg */
    --text-secondary: #d1d5db; /* gray-300, 10.7:1 on bg */
    --text-muted: #9ca3af;    /* gray-400, 4.0:1 — check if this is large text only */
    --link: #60a5fa;          /* blue-400, 5.9:1 on bg */
  }
}

In Chrome DevTools, enable 'Emulate CSS media feature prefers-color-scheme: dark' under Rendering to inspect dark mode without toggling OS settings. Then run the Lighthouse accessibility audit or axe extension to catch contrast failures automatically. Pay special attention to placeholder text, disabled form controls, and secondary/muted text labels.