WCAG 2.2 contrast and target-size checker
Two numbers cause most of the failures I see on small sites: a grey that is a shade too light, and an icon button that is 20 pixels wide.
Contrast
Success criterion 1.4.3 (AA) asks for 4.5:1 for normal text and 3:1 for large text, which WCAG defines as 24 CSS pixels, or about 18.66 pixels in bold. Criterion 1.4.11 (AA) asks for 3:1 for the parts of controls you need to see to use them, such as input borders and focus rings, and for graphics that carry meaning. Measure every state, not only the default; hover, disabled-looking, selected and error colours fail more often than the base style. The sample above, #767676 on white, is the lightest grey that still clears 4.5:1.
Target size
WCAG 2.2 added 2.5.8 Target Size (Minimum) at Level AA. A pointer target should be at least 24 by 24 CSS pixels. A smaller target passes if a 24-pixel circle centred on it does not overlap another target, or if the target is an inline link in a sentence, is a browser-controlled element, or has an equivalent control elsewhere. The calculator above uses the circle test for the nearest neighbour and treats the shorter side as the limit, so it errs on the strict side; read the spec's own wording for edge cases. Criterion 2.5.5 at Level AAA asks for 44 by 44, which is also the figure Apple's guidelines use, so aiming at 44 for touch is a safe habit.
The same checks inside your agent
This page does the arithmetic once. Designers does it for a whole palette: check_contrast returns the ratio, an APCA figure, the nearest colour that passes, and a colour-blind check for palette colours that merge under protanopia, deuteranopia and tritanopia. check_touch_targets takes a list of targets with sizes and gaps and checks them against 24 for WCAG, 44 for iOS and the web, and 48 for Android. Both are free (60 calls a day each) and both run from Claude, Cursor, VS Code, Codex or ChatGPT over one remote MCP address.
Pro lifts the daily cap and adds the token contrast matrix (every foreground token against every background token, up to 200 colours where free allows 30) and the multi-page site crawl, at $5 a month. If you are checking a button and a paragraph, you do not need it. See Pro.
What these checks leave out
Contrast depends on rendered colour, including text over images and gradients, which a hex pair does not capture. Target size depends on the rendered box, which you can read from browser developer tools. Neither number says anything about keyboard access, focus order or screen reader behaviour. For the legal picture in the EU, start with the European Accessibility Act guide, and for a page-wide scan use the free page accessibility audit.
Questions people ask
What contrast ratio does WCAG 2.2 AA require?
4.5:1 for normal text and 3:1 for large text (at least 24 CSS px, or 18.66 px bold) under success criterion 1.4.3. Under 1.4.11, user interface components and meaningful graphics need 3:1 against adjacent colours.
How big does a button have to be under WCAG 2.2?
Success criterion 2.5.8, Target Size (Minimum), at Level AA asks for pointer targets of at least 24 by 24 CSS pixels, unless enough spacing separates a smaller target from its neighbours, the link is inline in a sentence, or the size is set by the browser. The stricter 2.5.5 at Level AAA asks for 44 by 44.