Accessibility Specimen

WCAG contrast pair display with color preview, ratio value, and AA/AAA pass/fail badges.

Preview

text-primary / surface-page15.4:1

AA ✓AAA ✓

text-secondary / surface-page4.8:1

AA ✓AAA ✗

Installation

npx visor add accessibility-specimen

This copies two files into your project:

components/ui/accessibility-specimen/accessibility-specimen.tsx — the component
components/ui/accessibility-specimen/accessibility-specimen.module.css — the styles

Usage

import { AccessibilitySpecimen } from '@/components/ui/accessibility-specimen/accessibility-specimen';

<AccessibilitySpecimen
  fgToken="--text-primary"
  bgToken="--surface-page"
  fgLabel="text-primary"
  bgLabel="surface-page"
  ratio={15.4}
  wcagAA
  wcagAAA
/>

API Reference

AccessibilitySpecimenProps

Prop	Type	Default	Description
`fgToken`*	`string`	—	CSS custom property for the foreground/text color (e.g. "--text-primary").
`bgToken`*	`string`	—	CSS custom property for the background color (e.g. "--surface-page").
`fgLabel`*	`string`	—	Human-readable label for the foreground color.
`bgLabel`*	`string`	—	Human-readable label for the background color.
`ratio`*	`number`	—	Contrast ratio (e.g. 4.5).
`wcagAA`*	`boolean`	—	Whether the color pair passes WCAG AA (4.5:1 for normal text).
`wcagAAA`*	`boolean`	—	Whether the color pair passes WCAG AAA (7:1 for normal text).
`className`	`string`	—	Additional CSS class names to merge onto the element.

This component is itself a documentation utility — it visualizes WCAG contrast compliance for your design token pairs. Use it in your design system docs to surface which token combinations meet AA (4.5:1) and AAA (7:1) contrast requirements for normal-size text, or AA Large (3:1) for large text.

Contrast ratios should be calculated with a tool or library before passing to this component — it renders the result, it does not compute it.