Contrast Checker Card
Theme token contrast audit card showing computed ratios and AA and AAA pass badges for normal and large text across four Acme token pairings.
Theme token contrast audit card showing computed ratios and AA and AAA pass badges for normal and large text across four Acme token pairings.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the theme token contrast audit card. Other contrast checker shapes:
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.