Use the `inverted` attribute when displayed on primary background.

```html
<div class="flex gap-12 bg-primary p-4">
  <sd-badge inverted>8</sd-badge>
  <sd-badge variant="green" inverted>8</sd-badge>
  <sd-badge variant="red" inverted>8</sd-badge>
</div>
```