Dark schemes have their own contrast and glare rules.

The guidance#

Avoid pure black (#000) backgrounds — slate-950 reduces halation. Desaturate bright colors one step (blue-400 beats blue-500 on dark). Check focus rings: ring-offset colors must match the dark surface.

In markup#

html
<body class="bg-slate-950 text-slate-100">
  <a class="text-blue-400 underline">Desaturated for dark</a>
</body>

Checklist#

  • Tested with keyboard only
  • Screen-reader spot check
  • Contrast verified for new pairs
  • Reduced-motion behavior confirmed
  • Zoomed to 200% without loss

accessibility/index|Accessibility hub · utilities/interactivity/sr-only|sr-only