Developer guide

Dark Mode Color Contrast Checklist

Test dark-theme text and component states instead of assuming a light-theme pair will translate.

Short answer

A color pair that passes on a light surface may fail in dark mode because the actual backgrounds, overlays, and component states change.

When this applies

Dark themes require their own review for body text, muted text, borders, icons, buttons, focus rings, overlays, and imagery.

Practical review steps

  1. Check every token against its dark-theme surface.
  2. Test text over elevated cards, dialogs, and translucent overlays.
  3. Review focus, selected, disabled, and error states on real devices.

Check the actual color pair

Use the free Contrast Check with the foreground and background colors from the real component. It provides an immediate AA and AAA ratio check in the current browser tab.

Source and limit

For the formal requirement, review W3C's WCAG contrast minimum guidance. A ratio result checks a color pair; it is not a complete accessibility audit.