# Contrast badge (goodtabs UI)

Reads two theme tokens at runtime and shows their WCAG contrast ratio in either theme.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/contrast-badge.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/contrast-badge`

## Usage

```tsx
import { ContrastBadge } from "@/components/ui/contrast-badge"

<ContrastBadge foreground="--muted-foreground" background="--background" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| foreground | `string` |  | CSS custom property name for the text colour, such as "--muted-foreground". |
| background | `string` |  | CSS custom property name for the background colour. |

## When to use

- Token documentation, so a pair's ratio never goes stale
- Checking a new token pair in both themes

## When not to use

- Translucent colours: it reads the token as opaque and ignores alpha
- Production UI, where it adds a canvas read for no user benefit

## Notes for agents

- Tokens are resolved through a 1px canvas, so hex, oklch and color-mix values all work
- It watches class, data-theme and style on the html element and recomputes on change
- The swatch is aria-hidden, the ratio text is the accessible content

## The maths

- Lin(c) = c / 12.92 for c ≤ 0.04045, else ((c + 0.055) / 1.055)^2.4, applied to each channel.
- L = 0.2126 R + 0.7152 G + 0.0722 B, then CR = (L lighter + 0.05) / (L darker + 0.05).
- Muted-foreground on the dark background is 6.13:1, which clears 4.5:1 for AA.

Docs: https://ui.goodtabs.co/components/contrast-badge