What should you check before an AI agent ships a page?
Check four numbers before an AI agent ships a page: text contrast of at least 4.5:1, tap targets of at least 24x24 px, body lines of 45 to 65 characters, and a lab LCP of 2,000 ms or less. Then fix every failure and measure again.
Facts checked against the live site and catalog on 13 October 2026
These are the four rules in the example check on the Motif home page: contrast-text-aa, target-size-aa, measure-max and lab-lcp. They cover whether a page is readable, tappable and fast, which is where AI built pages most often slip without anyone noticing.
Why check numbers instead of eyeballing the page?
A coding agent can produce a page that looks finished in a screenshot and still has grey text nobody can read, buttons too small for a thumb, or a hero image that takes seconds to appear. Numbers make the check repeatable. Your agent can measure each one, report it, fix it and measure again, and you can see exactly what passed.
1. Is the text contrast at least 4.5:1?
Measure the contrast of every text color against what sits behind it, including text over photos. Body text should reach 4.5:1 or better. The Motif home page example shows both sides: body text at 5.9:1 passes, while a hero button at 3.9:1 on an image fails. Text on photos is the usual miss, because the contrast changes across the image.
2. Are tap targets at least 24x24 px?
List every tap target smaller than 24x24 px and make it bigger. Small, repeated controls are easy to overlook: in the home page example, calendar cells at 20x20 px fail the target-size-aa rule. Icon buttons, close buttons and pagination links are worth checking too.
3. Is body text 45 to 65 characters per line?
Lines that run too long are hard to read. Cap body text at 45 to 65 characters per line; the home page example fails 80ch body text and fixes it by capping the measure at 60ch. In CSS this is usually a max-width in ch units on the text container.
4. Is the lab LCP 2,000 ms or less?
Largest Contentful Paint is when the biggest element on screen, often a hero image or headline, finishes rendering. Run a lab test and read the LCP. The Motif target is 2,000 ms or less; the home page example passes at 1,640 ms. If it is slower, find the heavy element and fix it, then test again.
How does Motif check these numbers?
With Motif connected over MCP, your agent sends what it measured to the check_design_contract tool. It checks measured facts, such as contrast ratios, target sizes, measure, motion timing and LCP, against deterministic rules and returns PASS or FAIL for each. Anything the agent did not measure comes back as unknown, never as a pass. Motif does not crawl or render your page itself: the agent measures, Motif judges. See the tools page for the full tool list and connect to add the server, https://mcp.asv-labs.com/mcp, to any MCP client. The rule checks are included in the 30-day Free trial, which needs no card. Creator is $9 a month; see limits.
A prompt you can paste after your agent builds a page:
Measure text contrast (including text on photos), every tap target size, body line length in characters, and lab LCP. Send the measurements to Motif check_design_contract. Fix every FAIL and re-check. Report anything you didn't measure as unknown.
Passing these four does not make a page good, and it is not an accessibility or legal compliance review. It catches the common, measurable misses. The guides cover the rest of the design work.
FAQ
Is 4.5:1 the WCAG contrast ratio? 4.5:1 is the threshold in Motif's contrast-text-aa rule for body text. Treat it as a design check, not a compliance sign off.
Does Motif measure my page for me? No. Your agent measures the page and sends the results. Motif checks them and reports unmeasured items as unknown.
What if my agent can't measure LCP? Then the check reports LCP as unknown, not as a pass. Run a lab test yourself or give the agent a tool that can.
Do the checks cost extra? The rule checks are part of the 30-day Free trial. Creator is $9 a month and there are no overage charges.
More answers
- What is Motif?The definition, the numbers, the price, and the limits, in that order.
- What is an MCP design library?The category, and how it differs from a prompt file or a component catalog.
- How Motif connects to Claude, ChatGPT, and CursorOne server URL, browser sign-in, and how far each client has been tested.
- Motif vs free agent design skillsA dated comparison with frontend-design and UI UX Pro Max. No score.
- Why AI-built sites look the sameWhy agent-built sites cluster on the same layouts, and what Motif does and doesn't promise.
- Design tokens for AI-built frontendsWhy agents guess the same values, and how a token file gives them yours. With the limits.