{"uid":"cap_G5UfhUzcRr8uKOjMySVe1","slug":"css-design-calc-wcag-2-2-target-size-checker-6ce04d01","name":"CSS Design Calc – WCAG 2.2 Target Size Checker","description":"Check a click or touch target against WCAG 2.2 target size (24 px AA, 44 px AAA) including the spacing exception.","url":"https://css-design-calc.x402tookit.com/target-size?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"object","required":["type","method"],"properties":{"type":{"type":"string","const":"http"},"method":{"enum":["GET"],"type":"string"},"queryParams":{"type":"object","required":["widthPx","heightPx"],"properties":{"widthPx":{"type":"number","description":"Target width in CSS px (the clickable box)"},"heightPx":{"type":"number","description":"Target height in CSS px"},"neighbourCenterDistancePx":{"type":"number","description":"Centre-to-centre distance to the nearest OTHER undersized target, px (for the spacing exception)"}}}},"additionalProperties":false},"output":{"type":"object","required":["type"],"properties":{"type":{"type":"string"},"example":{"type":"object","properties":{"asOf":{"type":["null","string"]},"source":{"type":["null","string"]},"reasons":{"type":["array","null"],"items":{"type":"string"}},"summary":{"type":["null","string"]},"verdict":{"type":["null","string"]},"widthPx":{"type":["null","number"]},"degraded":{"type":["boolean","null"]},"heightPx":{"type":["null","number"]},"disclaimer":{"type":["null","string"]},"notChecked":{"type":["array","null"],"items":{"type":"string"}},"meetsBySize":{"type":["boolean","null"]},"smallerSidePx":{"type":["null","number"]},"meetsBySpacing":{"type":["boolean","null"]},"meetsWcag258Aa":{"type":["boolean","null"]},"meetsWcag255Aaa":{"type":["boolean","null"]},"shortfallTo24Px":{"type":["null","number"]},"shortfallTo44Px":{"type":["null","number"]},"appleGuidelinePt":{"type":["null","number"]},"appleGuidelineMet":{"type":["boolean","null"]},"paddingNeededFor24":{"type":["null","object"],"properties":{"vertical":{"type":["null","number"]},"horizontal":{"type":["null","number"]}}},"materialGuidelineDp":{"type":["null","number"]},"materialGuidelineMet":{"type":["boolean","null"]},"neighbourCenterDistancePx":{"type":["null","number"]}}}}}}},"responseSchema":null,"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_TkqRuiFSkEwhRHdwUhqB5","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Validates a click/touch target's dimensions against WCAG 2.2 AA (24 px) and AAA (44 px) target size criteria, including the spacing exception for nearby undersized targets.","exampleAgentPrompt":"Can you check if my submit button — 32 px wide and 28 px tall — passes WCAG 2.2 AA and AAA target size requirements? The nearest other small button is 30 px away center-to-center.","exampleUseCases":[{"title":"Accessibility audit for icon button","prompt":"I have a close icon that's 20 px wide and 20 px tall, and the nearest other target is 25 px away center-to-center. Does it pass WCAG 2.2 AA target size, including the spacing exception?"},{"title":"Checking if padding fix is needed","prompt":"My navigation link is 18 px wide and 16 px tall. How far short is it from WCAG 2.2 AA compliance, and how much padding would I need to add to fix it?"},{"title":"Confirming AAA compliance for large CTA","prompt":"Our primary call-to-action button is 48 px wide and 44 px tall. Does it meet WCAG 2.2 AAA target size as well as AA? Also check against Apple and Material Design guidelines."}],"resultDescription":"Returns a detailed object including pass/fail verdicts for WCAG 2.2 AA (2.5.8, 24 px) and AAA (2.5.5, 44 px) criteria, whether the spacing exception applies, the smaller side in px, shortfall amounts to each threshold, padding needed to meet AA, Apple HIG and Material Design compliance flags, a human-readable summary, and a list of reasons explaining the verdict.","failureModes":["Missing required widthPx or heightPx query parameters returns an error","Non-numeric or negative values for dimensions may produce unexpected results","neighbourCenterDistancePx omitted means spacing exception cannot be evaluated and is reported as not checked","Service unavailability returns a non-200 HTTP status"],"whenToPreferThis":"Use this endpoint when you need a precise, standards-referenced verdict on whether a specific UI element meets WCAG 2.2 target size criteria (SC 2.5.8 AA and SC 2.5.5 AAA), including the nuanced spacing exception. Prefer it over manual calculations when you also want Apple HIG and Material Design compliance checked simultaneously, or when you need the exact padding required to bring a target into compliance.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-30T00:30:17.894Z","isFirstParty":false,"canonicalSlug":"css-design-calc-wcag-2-2-target-size-checker-6ce04d01"}