Project 9: Dark Mode & Accessibility

Project 9: Dark Mode & Accessibility

Give your site a dark theme that respects visitors' system preferences and keeps contrast strong.

Use CSS variables

:root {
  --bg: #ffffff;
  --fg: #1f1f1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #e6e6e6;
  }
}

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

The accessibility list

• Contrast: body text at least 4.5:1, large text 3:1.
• Focus: never remove a visible focus outline - add :focus-visible style instead.
• Reduce motion: wrap effects in @media (prefers-reduced-motion: reduce).
• Test with keyboard: each button reachable and visibly focused.

Checklist

• [ ] A color variable for bg/fg
• [ ] A dark mode flips them on system request
• [ ] Focus outline visible (test with Tab)
• [ ] Text passes the contrast number
• [ ] Reduced-motion honored

TL;DR

Dark mode is variables + prefers-color-scheme. Accessibility is contrast, focus and motion.