Cursor guidelines
Cursor
Usage
Default (Arrow)
Use the default cursor for non-interactive components like the badge.
WCAG 2.2 compliance
Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.
1 . Perceivable
Requirement
Criterion
Level
Compliance
Non-text content
A
Non‑text elements—such as icons used in badges—must provide a text alternative that communicates the badge’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
A, AAA
Badges should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized.
Use of color
A
Color is never used as the sole way to convey meaning in buttons. Badges use color to reinforce their meaning, but every badge also includes a clear text label that communicates purpose.
Text contrast minimums
AA
Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.
2 . Operable