A badge is a visual indicator only for numeric values. The colours have semantic meaning, reflected by the name given in the code example.
Semantic colour can help users recognise and recall meaning more quickly, especially when scanning a view, for example. It’s important that the badge still convey the same meaning without colour information.
This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:
Applicable WCAG guidelines: