Interactive demo / No installation
One small button.
One visible difference.
Check this sample in your browser. Review a supplied correction, apply it, and measure again.
LIVE SAMPLEOriginal
Member profile
How your team sees you.
A simple profile with a deliberately small button.
Display nameStudio member
This sample does not save a profile.
40px minimum height · STYLE-A11Y-009
From the canonical button contract. This demo measures height only; the rule covers both dimensions. Not a universal WCAG minimum.
From the canonical button contract. This demo measures height only; the rule covers both dimensions. Not a universal WCAG minimum.
See what the browser measures.
Ready. Check the button to measure its current height.
A supplied correction
Remove the fixed 24px height. Use this project's minimum and comfortable vertical padding.
/* Remove */
height: 24px;
/* Apply to this sample */
height: auto;
min-height: 40px;
padding: 10px 16px;This teaching example changes only the sample above. It does not inspect your files or run the source-bound CLI repair workflow.
Take the next step
A shared rule is
only the beginning.
Connect a coding agent to the design contract, or replay the full local workflow with source-bound findings and a recovery receipt.