WCAG requires 4.5:1 for body text, 3:1 for large text and UI boundaries. Nakshora palettes make this a pairing discipline.
The guidance#
Contrast is a property of PAIRS. For each palette, shades 50–400 carry dark text and 600+ carry white text. Verify critical pairs once, then encode them as component classes or tokens so the decision is never reopened.
In markup#
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">7.0:1 on white</button>
<button class="bg-blue-100 text-blue-800 px-4 py-2 rounded-lg">Accessible light variant</button>Checklist#
- Tested with keyboard only
- Screen-reader spot check
- Contrast verified for new pairs
- Reduced-motion behavior confirmed
- Zoomed to 200% without loss
Related#
accessibility/index|Accessibility hub · sr-only
