Badge accessibility

WCAG 2.1 AA requirements

Semantics

• Badge renders as a <span> with no implicit ARIA role. It is treated as inline text by screen readers.
• If the badge conveys status that is not also present in surrounding text, add an aria-label or visually hidden prefix (e.g., "Status: Active") so the meaning is not colour-only.

Colour is never the only signal

• Every variant uses both a distinct background colour and a text label. Never use an empty badge with colour alone to indicate status.
• The destructive variant should always include a word like "Error", "Failed", or "Critical".

Contrast

• All variant colours are designed to meet 4.5:1 contrast against their background in both light and dark themes.
• If you override colours with className, verify contrast manually.

Interactive badges

• Badge is not interactive by default. If you need a clickable badge, wrap it in a <button> or <a> and provide a focus ring and accessible label.

Audit checklist

• Badge text is descriptive (not colour-only meaning)
• 4.5:1 contrast on every variant in light and dark
• Clickable badges have focus ring and keyboard support
• Status badges have text labels, not just colour