Target Size

{
  "appleGuidelineMet": false,
  "appleGuidelinePt": 44,
  "asOf": "2026-10-11T14:32:44.976Z",
  "degraded": false,
  "disclaimer": "Screening signal computed from the named public source. Not financial, legal or investment advice; provided as is. Verify at the source before acting.",
  "heightPx": 20,
  "materialGuidelineDp": 48,
  "materialGuidelineMet": false,
  "meetsBySize": false,
  "meetsBySpacing": true,
  "meetsWcag255Aaa": false,
  "meetsWcag258Aa": true,
  "neighbourCenterDistancePx": 26,
  "notChecked": [
    "the other 2.5.8 exceptions: inline targets in a sentence, targets whose size is set by the browser, equivalent controls elsewhere on the page, and essential presentations",
    "the spacing exception when the neighbour is a full-size (24 px or larger) target: its box must stay clear of the 24 px circle instead",
    "…2 more"
  ],
  "paddingNeededFor24": {
    "horizontal": 2,
    "vertical": 2
  },
  "reasons": [
    "WCAG 2.5.8 (AA): targets must be at least 24 by 24 CSS pixels unless a 24 px circle centred on the target touches no other target's circle.",
    "Two undersized targets pass when their centres are at least 24 px apart (the two 12 px radius circles then do not intersect)."
  ],
  "shortfallTo24Px": 4,
  "shortfallTo44Px": 24,
  "smallerSidePx": 20,
  "source": "WCAG 2.2 success criteria 2.5.8 Target Size (Minimum, AA) and 2.5.5 Target Size (Enhanced, AAA); platform guidance as published by Apple and Google",
  "summary": "20 x 20 CSS px: is under 24 x 24 but passes through the spacing exception.",
  "verdict": "MEETS_AA_VIA_SPACING",
  "widthPx": 20
}

# bash or zsh: see the payment challenge. Nothing is charged.
curl -sS -g -i 'https://css-design-calc.x402tookit.com/target-size?heightPx=20&neighbourCenterDistancePx=26&widthPx=20'

# x402 v2 sends the challenge base64-encoded in the PAYMENT-REQUIRED header (v1 sends it in the body).
# To read the header:
curl -sS -g -o /dev/null -D - 'https://css-design-calc.x402tookit.com/target-size?heightPx=20&neighbourCenterDistancePx=26&widthPx=20' \
  | grep -i '^payment-required:' | cut -d' ' -f2 | tr -d '\r' | base64 --decode

// npm i @x402/fetch @x402/evm viem
import { wrapFetchWithPayment, x402Client } from "@x402/fetch";
import { registerExactEvmScheme } from "@x402/evm/exact/client";
import { privateKeyToAccount } from "viem/accounts";

// Pays at most $0.02 per call.
const client = new x402Client().setSpendControls({ maxAmountPerPayment: "$0.02" });
registerExactEvmScheme(client, { signer: privateKeyToAccount(process.env.EVM_PRIVATE_KEY) });
const pay = wrapFetchWithPayment(fetch, client);

// Not sure it's safe to pay? ToolVet checks it first for $0.005. Pay for that from a separate
// client: this one is capped at $0.02 per payment. GET https://toolvet.app/api/v1/check?url=https%3A%2F%2Fcss-design-calc.x402tookit.com%2Ftarget-size
const res = await pay("https://css-design-calc.x402tookit.com/target-size?heightPx=20&neighbourCenterDistancePx=26&widthPx=20");
console.log(res.status, await res.text());

# pip install "x402[requests,evm]"
import os
from eth_account import Account
from x402 import x402ClientSync
from x402.http.clients import x402_requests
from x402.mechanisms.evm import EthAccountSigner
from x402.mechanisms.evm.exact.register import register_exact_evm_client

# Pays at most $0.02 per call.
client = x402ClientSync().set_spend_controls({"max_amount_per_payment": "$0.02"})
register_exact_evm_client(client, EthAccountSigner(Account.from_key(os.environ["EVM_PRIVATE_KEY"])))

with x402_requests(client) as session:
    res = session.get("https://css-design-calc.x402tookit.com/target-size?heightPx=20&neighbourCenterDistancePx=26&widthPx=20")
    print(res.status_code, res.text)