Designing for WCAG AA Compliance with Tailwind CSS v4

Accessibility is Not Optional

Web accessibility (WCAG AA) ensures that users of all abilities can read, navigate, and interact with your site. Tailwind v4's CSS-first config makes handling colors, theme contrast ratios, and keyboard focus states incredibly smooth.

1. Contrast Ratios

Ensure text contrast is at least 4.5:1 for normal text and 3:1 for large text. In Tailwind v4, configure your theme with CSS variables that adapt between light and dark themes:

:root {
  --background: 255 255 255;
  --foreground: 9 9 11;
}
.dark {
  --background: 9 9 11;
  --foreground: 250 250 250;
}

2. Focus Rings

Never remove outline-none without providing a visible focus indicator. Use Tailwind's focus-visible utilities to style element outlines for keyboard-only navigators:

<button className="focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none">
  Click Me
</button>

3. Screen Reader Texts

Use semantic tags like <main>, <header>, <nav>, and <footer>. If you have a button that only renders an icon, add screen-reader text inside:

<button>
  <Moon className="h-4.5 w-4.5" />
  <span className="sr-only">Toggle dark mode</span>
</button>