High Contrast Theme

Ship an accessibility-first high contrast mode that respectsprefers-contrast: morewithout breaking your existing design tokens.

CSS Variables

:root {
  --fg: #e5e7eb;
  --bg: #0a0612;
  --border: #374151;
  --accent: #8b5cf6;
}

@media (prefers-contrast: more) {
  :root {
    --fg: #ffffff;
    --bg: #000000;
    --border: #ffffff;
    --accent: #f472b6;
  }
}

Tailwind Integration

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        fg: 'var(--fg)',
        bg: 'var(--bg)',
        border: 'var(--border)',
        accent: 'var(--accent)',
      },
    },
  },
}

Component Usage

<button className="rounded-lg border border-[var(--border)]
  bg-[var(--bg)] px-4 py-2 text-[var(--fg)]
  hover:bg-[var(--accent)] transition-colors">
  Submit
</button>

Testing

Chrome DevTools → Rendering → Emulate CSS media featureprefers-contrast: more
Windows High Contrast Mode triggers the same media query
macOS: System Settings → Accessibility → Display → Increase contrast

Pro tip

Keep your high-contrast palette to 4–6 tokens. Every extra variable is a surface you must audit. Ship the minimal set that passes WCAG 2.2 AAA (7:1 contrast ratio).