# A11y Contrast Badge

Check in the browser whether the theme palette meets AA before opening the PR.

- id: `a11y-contrast-badge`
- Page: https://agentic-ui-kit.com/components/a11y-contrast-badge
- Live preview: https://agentic-ui-kit.com/live/component/a11y-contrast-badge

## Install

```bash
agentic-ui add a11y-contrast-badge
npx shadcn@4.17.0 add @agentic-ui/a11y-contrast-badge
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** wcag-contrast-ratio, oklch-color-parsing, lab-color-parsing, token-sheet-audit, live-computed-style-audit, theme-reactive-remeasure, build-time-gate, marginal-pass-detection, large-text-threshold, collapsible-panel, live-region-verdict
- **Intents:** configure, audit-trail, track-status
- **Suits domains:** saas, settings, devtools, operations, analytics
- **Interaction:** toggle-panel, keyboard-activate, escape-close, theme-switch-remeasure
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** check in the browser whether the theme palette meets AA before opening the PR, fail the CI build when someone darkens a token and breaks secondary text contrast, audit a brand theme against AAA without changing the application code, demonstrate to an enterprise buyer that the system measures accessibility instead of claiming it
- **Avoid when:** a full accessibility audit, which needs roles, focus and screen reading in addition to contrast, text contrast over an image or gradient, where there is no single background color to measure
- **Preserve when adapting:** wcag-formula, threshold-model, build-and-browser-parity, verdict-semantics
- **Replace when adapting:** token-pair-list, domain-copy, badge-placement
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button