Audit Dark Mode for SEO and Accessibility Issues

Dark mode implementations introduce SEO risks that are invisible during standard audits. If your dark mode uses CSS that hides text from crawlers, creates contrast violations that fail accessibility checks, or renders differently for Googlebot than for users, your rankings and user experience both suffer.

How Dark Mode Can Affect SEO

Hidden Text Risk

Google has penalized hidden text since its earliest algorithm updates. Dark mode can accidentally create hidden text scenarios:

• White text on white background in light mode -- If dark mode CSS sets color: white and light mode does not override it, text becomes invisible to users in light mode but visible to Googlebot (which typically renders light mode).
• CSS display: none toggling -- Some implementations hide entire sections in one mode and show them in another. Googlebot sees all CSS states but indexes based on the default render.
• Opacity and visibility tricks -- Setting opacity: 0 or visibility: hidden for theme-specific content can trigger spam filters.

Googlebot Rendering Behavior

Googlebot renders pages using Chrome's rendering engine. Key behaviors for dark mode:

• Googlebot does not send prefers-color-scheme: dark by default
• It renders the light mode version of your page
• If your dark mode is the default (no light mode fallback), Googlebot may see an unstyled or poorly styled page
• Dynamic theme switching via JavaScript is executed, but the initial render state is what gets indexed

Auditing Dark Mode Implementation

Step 1: Check CSS Architecture

The correct approach uses prefers-color-scheme media queries with proper fallbacks:

/* Base styles (light mode - this is what Googlebot sees) */
:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --link-color: #0066cc;
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --link-color: #66b3ff;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

Step 2: Verify Text Visibility in Both Modes

Use Chrome DevTools to simulate both modes and check for hidden text:

1. Open DevTools > Rendering panel (Ctrl+Shift+P, type "rendering")
2. Set "Emulate CSS media feature prefers-color-scheme" to light
3. Inspect all text elements for sufficient contrast
4. Switch to dark and repeat
5. Compare the DOM -- ensure no elements are hidden in one mode but visible in the other

Step 3: Contrast Ratio Validation

WCAG 2.1 requires minimum contrast ratios in both modes:

Common dark mode contrast failures:

• Gray text on dark gray backgrounds (e.g., #666 on #222 = 3.2:1, fails AA)
• Muted link colors that do not stand out from body text
• Placeholder text in form inputs becoming unreadable
• Image alt text overlays with insufficient contrast against dark backgrounds

// Automated contrast checking with axe-core
const axe = require('axe-core');

// Run accessibility audit on dark mode
async function auditDarkMode(page) {
  // Enable dark mode
  await page.emulateMediaFeatures([
    { name: 'prefers-color-scheme', value: 'dark' }
  ]);

  const results = await page.evaluate(async () => {
    return await axe.run(document, {
      runOnly: ['color-contrast']
    });
  });

  return results.violations;
}

Image and Media Considerations

Dark Mode Image Variants

Some images look wrong in dark mode (e.g., screenshots with white backgrounds, logos with no transparency). Use the <picture> element for mode-specific images:

<picture>
  <source srcset="/images/logo-dark.svg" media="(prefers-color-scheme: dark)" />
  <img src="/images/logo-light.svg" alt="Company Logo" width="200" height="50" />
</picture>

Googlebot will see the light mode image (the <img> fallback), which is the correct behavior for indexing.

SVG Fill Colors

Inline SVGs that use hardcoded colors break in dark mode:

/* Make SVGs adapt to dark mode */
svg {
  fill: var(--text-color);  /* Uses CSS variable instead of hardcoded color */
}

Structured Data Rendering

Verify that structured data outputs correctly regardless of color scheme. Schema markup should never change based on dark/light mode. If your JSON-LD is generated dynamically, ensure the theme state does not affect the output:

// WRONG: Theme-dependent schema
const schema = {
  "@type": "Product",
  "image": isDarkMode ? darkImage : lightImage  // Googlebot gets light version
};

// CORRECT: Always use the canonical (light mode) image in schema
const schema = {
  "@type": "Product",
  "image": "https://example.com/product-standard.jpg"
};

Testing Checklist

• Light mode renders correctly as the default (what Googlebot sees)
• No text is hidden in light mode that is visible in dark mode
• All text passes WCAG AA contrast ratio (4.5:1) in both modes
• Links are visually distinguishable from body text in both modes
• Images have appropriate variants or display acceptably in both modes
• Form inputs, buttons, and interactive elements are visible in both modes
• Structured data is identical regardless of color scheme
• Google Search Console URL Inspection shows correct rendering
• Lighthouse accessibility score passes in both modes
• No display:none or visibility:hidden used for theme switching on text content

Performance Impact

Dark mode CSS should add minimal overhead:

• CSS custom properties (variables) with media queries add less than 1KB to stylesheet
• Avoid loading two complete stylesheets -- use variables, not separate dark/light CSS files
• Dark mode images should be lazy-loaded and only fetched when dark mode is active
• Test that dark mode toggle JavaScript does not block the main thread (target: under 10ms execution)