Target size
How big a control's tappable area actually is, not how big it looks. Aim for 44px; WCAG's 24px rule has real exceptions.
See it
What it is
Target size is the clickable or tappable area of a control, which is not the same as how big it looks. A 16px close icon can sit inside a 44px hit area and nobody sees the difference except the thumbs that stop missing it. The numbers people quote: WCAG 2.2 sets 24 by 24 CSS pixels as the AA minimum (SC 2.5.8), Apple's HIG says 44 by 44 points, and Material says 48 by 48 dp. Design to 44 and treat 24 as the number an auditor will actually measure, keeping in mind that 2.5.8 is a rule with written exceptions rather than a flat floor.
The usual offenders: icon-only buttons in dense toolbars, tiny 'x' dismiss controls on toasts and chips, rows of social icons in a footer, pagination numbers, and checkboxes styled down to 14px. The cheapest fix is padding. When padding would wreck the layout, expand the hit area with a pseudo-element (::after with negative inset and position: absolute) so the visual stays small while the touch area grows.
Gotchas worth knowing. SC 2.5.8 ships with five exceptions and they do a lot of work: spacing (a small target passes if a 24px circle centered on it does not overlap the circle of any neighbor), inline (links sitting inside a sentence), equivalent (the same action is available elsewhere on the page at full size), user agent control (native select options and the like, which you never styled), and essential (a map pin has to sit where the place is). Also, overlapping expanded hit areas are their own bug: two adjacent icons each padded out to 44px will steal each other's taps, so add real gap between them rather than just inflating both.
Ask AI for it
Raise the touch targets in this component toward 44 by 44 CSS pixels while keeping the current visual sizes, and judge anything you leave smaller against WCAG 2.5.8's 24px minimum and its exceptions (spacing, inline links, an equivalent full-size control elsewhere, user agent controls, essential positioning). Use padding wherever the layout allows it. Where it does not, give the control 'position: relative' and add a '::after' pseudo-element with 'position: absolute', an empty 'content' string (without it the pseudo-element never renders), and negative inset values sized to the gap you need. Then verify the expanded area really receives pointer events: no ancestor with 'overflow: hidden' clipping it, nothing stacked above it, and no two expanded areas overlapping (add real gap instead). List every control you changed, its resulting hit area in pixels, and which exception you leaned on anywhere you left one small.