About this block

Contrast Checker Card lists four Acme theme token pairings in a ruled card: foreground on background at 14.2:1, muted-foreground on background at 5.3:1, primary button label at 7.1:1, and muted text on card at 4.7:1. Each row shows a live swatch (the actual token values rendered as a tiny Aa preview), the numeric ratio, and four pass/fail badges: AA Normal, AAA Normal, AA Large, AAA Large. The footer carries the honest caveat that math is only the start.

Pairs are one typed array with every boolean field on every object. The swatch uses inline style so the preview reflects the actual deployed theme rather than a hardcoded color.

When to use

Reach for this block on the design system or accessibility page, wired to the CSS custom properties of the theme you are auditing. Update the ratio values whenever the palette changes.

A natural flow around it on an Application Pro page:

Before

• A11y checklist panel

After

• Keyboard nav guide
• Screen-reader labels table

What you can display

One strong use is the theme token contrast audit card. Other contrast checker shapes:

• Dark mode pairings. The same structure with the dark token values and their own ratios.
• Brand color audit. Non-semantic brand tokens checked against white and black backgrounds.
• Interactive state pairs. Hover, focus, and disabled token values alongside the default.

Tip: include the font weight in the note column; a 4.5:1 ratio at 400 weight behaves differently than the same ratio at 700.