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.

• ID: accessibility-basics.visual-color.dark-mode-contrast

• Severity: low

• What to look for: Enumerate every relevant item. If the application supports dark mode, check color contrast in dark theme. Colors should still meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text and components).

• Pass criteria: At least 1 of the following conditions is met. Dark mode colors meet WCAG AA contrast standards: 4.5:1 for normal text, 3:1 for large text and UI components.

• Fail criteria: Dark mode colors fall below required contrast ratios, or dark mode is not supported (skip check if light-only site).

• Skip (N/A) when: The application does not support or offer a dark mode.

• Detail on fail: Identify dark mode contrast issues. Example: "Dark mode text (#ccc) on (#1a1a1a) background has 8:1 contrast. But some labels (#aaa) on (#222) have only 4.2:1."

• Remediation: Ensure dark mode colors meet contrast standards:

  @media (prefers-color-scheme: dark) {
    body {
      color: #e8e8e8; /* Sufficient contrast on dark background */
      background-color: #1a1a1a;
    }
    a { color: #6fb3ff; } /* Blue link sufficient on dark */
  }