Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
accessibility-specimen
WCAG contrast-ratio table for color pairs + a11y checklist for design-system docs.
Overview
<accessibility-specimen> is a docs-focused specimen with two modes: a tabular contrast-ratio display for color pairs, and a slot-driven a11y checklist with status icons. Used in design-system docs to make accessibility evidence visible alongside tokens.
Contrast mode (default)
Author each color pair as a <button data-fg data-bg [data-label]> child. The component renders a table with the pair label, a styled sample, the WCAG 2.x contrast ratio, and pass/fail badges for AA, AA Large, AAA, and AAA Large.
Contrast pairs
<accessibility-specimen> <button data-fg="#000" data-bg="#fff" data-label="Body text">Default</button> <button data-fg="#666" data-bg="#fff" data-label="Muted text">Helper</button> <button data-fg="#fff" data-bg="#0066cc" data-label="Action">Button</button></accessibility-specimen>Color values can be hex (3/6/8 char), rgb()/rgba(), or named — anything the browser can resolve via computed style is supported.
Checklist mode
Author a <ul> of items with data-status="pass|fail|warn|na". The component decorates each item with a status icon and a screen-reader-only status announcement.
A11y checklist
<accessibility-specimen type="checklist"> <ul> <li data-status="pass">Form inputs have associated labels.</li> <li data-status="warn">Some images may be missing alt text.</li> <li data-status="fail">Color contrast on muted text fails AA.</li> <li data-status="na">No videos here — captions N/A.</li> </ul></accessibility-specimen>WCAG thresholds
| Badge | Threshold | Meaning |
|---|---|---|
| AA | ≥ 4.5:1 | Body / normal text passes WCAG 2.x AA. |
| AA Large | ≥ 3.0:1 | Large text (≥ 18pt or ≥ 14pt bold) passes AA. |
| AAA | ≥ 7.0:1 | Body text passes AAA. |
| AAA Large | ≥ 4.5:1 | Large text passes AAA. |
Design-system family
<layout-specimen>— layout primitives<spacing-specimen>— spacing scale<type-specimen>— typography scale<motion-specimen>— easing / duration tokens<breakpoint-specimen>— responsive breakpoints<token-specimen>— arbitrary token scale
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
type | string | contrast | contrast | checklist |
Per-pair attributes (contrast mode, on <button>)
| Attribute | Description |
|---|---|
data-fg | Foreground color (required). |
data-bg | Background color (required). |
data-label | Display label (defaults to button text content). |
Per-item attributes (checklist mode, on <li>)
| Attribute | Description |
|---|---|
data-status | pass | fail | warn | na (default na). |