NoCharge

CSS pixels, honestly reported

Touch target size checker

Draw a rectangle, read its rounded CSS-pixel dimensions, and compare them with the 24 px and 44 px target-size thresholds. This demo does not measure spacing or audit another page.

Category: Accessibility

Bottom line: Drag a rectangle to compare its rounded width and height with 24 × 24 and 44 × 44 CSS pixels. The two reference squares are static; spacing, exceptions, and full accessibility conformance are not calculated.

Draw and measure

Your target, in CSS pixels

Drag inside the box to draw and measure a target.

  • 24 × 24 px — WCAG 2.5.8 minimum for components
  • 44 × 44 px — AAA recommendation, and NoCharge's default target size

How it works

Drag inside the drawing area to define opposite corners of a rectangle. The demo subtracts the pointer's start and current positions, takes the absolute width and height, and rounds each to the nearest CSS pixel for the readout. It compares both dimensions with 24 and 44; area alone is not the test.

Worked example

A drag from local position (10, 20) to (54, 64) produces 44 × 44 CSS pixels and reaches the larger size threshold in both directions. A 100 × 30 rectangle reaches 24 in both directions, but it does not reach 44 in height, even though its area is larger.

The two fixed Aa squares are visual references, not adjustable neighbors. The readout measures the rectangle you draw; it does not calculate their separation or inspect controls elsewhere on the page.

What it cannot do

  • This checks drawn dimensions only, not complete WCAG conformance. Target-size criteria include exceptions and spacing considerations that this demo does not evaluate.
  • CSS pixels are logical units, not millimeters or a count of physical screen pixels. Zoom and device density affect physical appearance.
  • The displayed dimensions are rounded. For boundary decisions, inspect unrounded geometry in developer tools rather than relying on a value rounded up to 24 or 44.
  • Drawing requires pointer or touch input. The example is not an automatic audit of your site, and it does not save the rectangle.

FAQ

What sizes should targets be?

WCAG 2.2 criterion 2.5.8 uses 24 × 24 CSS px at AA, and criterion 2.5.5 uses 44 × 44 at AAA, subject to their exceptions. This demo compares size only, not the complete criteria.

Why is spacing mentioned?

Spacing can affect accidental activation and is part of some target-size exceptions. This demo does not compute gaps or evaluate those exceptions; it only compares the drawn width and height.

Does the checker measure my page?

No. It measures the block you draw in this demo, using CSS pixels at your current zoom. Measuring a real page needs its rendered geometry and a separate accessibility review.

What does "physical size" mean?

CSS pixels are logical units. Their physical size depends on zoom and the display. This tool does not convert its measurements to millimeters or evaluate how a particular person uses a device.

Embed this tool

<iframe src="https://nocharge.net/tools/touch-target-checker/" width="400" height="640" title="NoCharge touch target checker"></iframe>
<p>Source: <a href="https://nocharge.net/tools/touch-target-checker/">NoCharge tool</a></p>

Next action

Try it with a game