AppReviewX Log in

Quick accessibility check: contrast and touch targets

Two checks that catch many problems in minutes. Verify the thresholds in current guidelines.

updated ·3 min read

In this guide

Low contrast and tiny tap areas hurt many people: users in bright sunlight, people with low vision, anyone with large fingers or a shaky hand. Two quick passes find a lot. This is not a full accessibility audit; for screen readers see the 10-minute screen reader test.

The thresholds, and where they come from

  • Text contrast: WCAG 2.2 criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 point, or 14 point bold).
  • Touch targets: WCAG 2.2 criterion 2.5.8 sets a minimum of 24 by 24 CSS pixels, with exceptions such as enough spacing between small targets. WCAG is written for web content; use it as a floor, not a mobile target.
  • Android: Google's accessibility help advises making touch elements at least 48dp wide and tall.
  • iOS: Apple publishes its own minimum size in the Human Interface Guidelines. Open the current page and note the value before you rely on one.

Guidelines change. Re-check the pages in the sources before you treat a number as final.

Check 1: color contrast

  1. Body text on its background. Why: grey text on white is the most common failure. How: pick the two colors with a color picker or screenshot, enter them in a contrast checker; aim for 4.5:1 or better.
  2. Large text and headings. Why: the bar is lower (3:1) but still has to be met. How: same method; confirm the text counts as large.
  3. Text on images and gradients. Why: contrast changes across the image. How: check the worst spot, not the best one.
  4. Placeholder, hint and disabled-looking text. Why: hints are often too pale to read. Truly inactive controls are exempt from the text rule, hints in active fields are not. How: check the color of the hint inside an active field.
  5. Icons and control borders that carry meaning. Why: a pale icon button or input outline can be invisible. WCAG 2.2 criterion 1.4.11 asks for at least 3:1 against adjacent colors for the parts of controls and graphics needed to understand them, such as a text input's border or a standalone icon. Inactive controls are exempt. How: check icon and border colors against the background.
  6. Dark mode. Why: a palette that passes in light mode can fail in dark mode. How: repeat items 1 to 5 in dark mode.
  7. Color is not the only signal. Why: red and green alone fail users with color vision deficiency. How: view a screenshot in grayscale; errors and states must still be clear (add an icon or text).

Check 2: touch targets

  1. Smallest tappable elements. Why: close buttons, icons and checkboxes are usually the culprits. How: turn on developer overlays (for example pointer location) or measure in the layout inspector; compare with 48dp on Android.
  2. Space between neighbors. Why: two small targets side by side cause mis-taps. How: tap quickly with your thumb on a real device; count mis-taps.
  3. Text links inside paragraphs. Why: a link in a line of text is hard to hit. How: try to tap each one; consider making important actions buttons.
  4. Edges and corners. Why: gestures and the screen edge interfere with targets near it. How: tap controls near edges, one-handed.
  5. Large font and display size. Why: scaling changes layouts and can shrink or overlap targets. How: set the largest font and display size and revisit items 1 to 4.

Record

Write down the screen, the element, the value measured and the threshold you used. Then add it to your test plan or a test case.

Get started on AppReviewX to get private, structured feedback from other developers on how your app reads and feels.