Compliance Score
ProA visual score indicator showing compliance, quality, or health as a percentage. Renders as a circular progress ring with the score number centred inside, colour-coded by threshold (green for high, amber for medium, red for low). Used in audit dashboards, quality gates, and accessibility reports.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Circular progress ring with percentage score and colour coding. | Use for compliance scores, quality ratings, and health checks. |
| Compact | Smaller inline score indicator for tables and lists. | Use in table cells or list items where space is limited. |
Usage Guidelines
Do
Colour-code by threshold — green (80–100), amber (50–79), red (0–49).
Don't
Use colour alone to convey the score — always show the number.
Do
Show the numeric percentage inside the ring for clarity.
Don't
Set arbitrary thresholds — document what each range means.
Do
Include a label explaining what the score measures.
Don't
Animate the ring on every render — only animate on first load or value change.
Code
Design Tokens
Accessibility
- Use role="meter" with aria-valuenow, aria-valuemin, and aria-valuemax.
- Provide aria-label summarising the score — "Accessibility compliance score: 87%".
- Do not rely on colour alone — the numeric percentage must always be visible.
- Respect prefers-reduced-motion for the ring fill animation.