Badge

Standard and conformance-level badges for WCAG, EN 301 549, Section 508, ADA and more.

Badge

WCAG 2.2A WCAG 2.2AA WCAG 2.2AAA EN 301 549 Section 508 Section 504 ADA ADA Title II ACA AODA EAA UK Equality Act 2010 Israeli Standard 5568 PDF/UA-1 PDF/UA-2

Using the badge accessibly

Use a badge to flag the status, standard or conformance level that applies to a piece of content — and make sure the badge's own text carries that meaning.

Do

  • Spell the meaning out in the badge label, so the word itself conveys the status — not the colour.
  • Keep label text at a contrast of at least 4.5:1 against the badge background.
  • Add a visually-hidden label when a badge signals status that the visible text does not state.

Don't

  • Don't rely on colour alone to tell one badge apart from another.
  • Don't pack buttons, links or other interactive controls inside a badge.
  • Don't let low-contrast label text drop below 4.5:1.

Build it right

  • Make the visible label state the meaning; never depend on colour alone.
  • Check label-to-background contrast meets 4.5:1 in every theme.
  • Treat a purely decorative badge as plain text — no extra markup needed.
  • If the status is not in the visible text, add a visually-hidden label for screen-reader users.
  • Keep badges non-interactive; place any controls outside the badge.

Source CSS lives in assets/css/components/badge.css.