WCAG 2.2 Checklist for Mobile Websites

Updated October 21, 2026

Short answer: On phones, the WCAG 2.2 criteria that fail most often are contrast (4.5:1 text, 3:1 large text and UI parts), Reflow at 320 CSS px, Resize Text to 200%, Target Size of at least 24 × 24 CSS px, Orientation, text alternatives, accessible names and page language. Automated tools catch only part of WCAG; gestures, focus, authentication and screen reader use need manual testing.

Free tool: Color contrast checker — Check text and background colors against WCAG AA and AAA, for light and dark mode, and get the nearest passing color.

WCAG 2.2 Level AA has 55 success criteria, and they all apply on phones. The ones mobile sites fail most are about the small screen and touch: text contrast of at least 4.5:1 (3:1 for large text and for icons and borders), no sideways scrolling at 320 CSS px wide, text that can grow to 200%, tap targets of at least 24 × 24 CSS px, both orientations, plus the basics of alt text, accessible names and page language. Use this checklist to test them; remember that automated tools catch only part of WCAG.

The checklist at a glance

The "Automated?" column describes what tools like ours can verify from the rendered page. "Partly" means a tool can find a missing value but can't judge whether the value is good.

Text and contrast

1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast

Normal text needs a contrast ratio of at least 4.5:1 against its background; large text (24px, or about 18.66px bold) needs 3:1. Under 1.4.11, the parts you need to see to use a control, such as an input's border, a checkbox outline, an icon-only button or a focus ring, need 3:1 against what's next to them. Phones are read outdoors in sunlight, so light grey text and pale borders fail in practice before they fail on paper. Test colors with the contrast checker and read how to fix low-contrast text. Check dark mode as well: a site that switches themes has to pass in both.

1.4.4 Resize Text and 1.4.12 Text Spacing

Text must be resizable up to 200% without losing content or function, and nothing may break when a user overrides spacing to line height 1.5×, paragraph spacing 2×, letter spacing 0.12× and word spacing 0.16× the font size. On phones, people do this through the system text size setting and browser zoom. The usual failures are fixed heights, white-space: nowrap labels and buttons that clip text. Our large text guide shows how to make layouts grow, and text too small covers base sizes.

/* Let boxes grow with their text */
.card, .btn { min-height: 44px; height: auto; }
.btn { white-space: normal; }

Layout and orientation

1.4.10 Reflow

Content must fit a 320 CSS px wide viewport without scrolling sideways, except for things that need two dimensions, such as maps, data tables or diagrams. That width is the same as a 1280px desktop window zoomed to 400%, which is why it matters for low-vision users on any device. Wide images, long URLs and fixed-width tables are the usual culprits; see content wider than the screen.

1.3.4 Orientation

Don't lock the page to portrait or landscape unless an orientation is essential (a piano app, a check-deposit camera). Some people have their phone mounted on a wheelchair in one orientation. Rotate your phone on each key page and check that nothing is hidden or broken.

Touch and motion

2.5.8 Target Size (Minimum)

New in WCAG 2.2: each target must be at least 24 × 24 CSS px, or spaced so that a 24px circle centered on it doesn't overlap another target. Links inside a sentence are exempt. It is a minimum: Apple suggests 44 pt and Material Design 48 dp for comfortable tapping. See tap targets and the tap target checker.

2.5.1 Pointer Gestures and 2.5.7 Dragging Movements

Anything that needs a path-based or multi-finger gesture (swipe a carousel, pinch a map) also needs a single-pointer way to do it, such as arrow buttons or plus and minus buttons. WCAG 2.2's 2.5.7 adds the same for dragging: a sortable list or a slider needs a tap alternative.

2.5.4 Motion Actuation

If shaking or tilting the phone triggers something ("shake to undo"), give a normal control for it as well and let users turn the motion response off, so it can't fire by accident.

Focus, forms and login

2.4.11 Focus Not Obscured (Minimum)

When a control gets keyboard focus, it must not be completely hidden by your own content. On phones, sticky headers, cookie banners and chat buttons are the usual offenders, especially for people using a Bluetooth keyboard or switch control. scroll-padding keeps focused items clear of a sticky header:

html { scroll-padding-top: 72px; scroll-padding-bottom: 80px; }

See sticky headers and popups for keeping bars small.

3.3.8 Accessible Authentication (Minimum)

Logging in must not depend on remembering, transcribing or solving something, unless there is an alternative or a helper. On a phone, that means: don't block paste in password or one-time-code fields, let password managers fill fields (use proper autocomplete values), and offer a non-puzzle option if you use a CAPTCHA.

<input type="password" autocomplete="current-password">
<input inputmode="numeric" autocomplete="one-time-code">

Markup basics

• 1.1.1 Non-text Content — informative images need alt text that says what the image conveys; decorative images get alt="".
• 4.1.2 Name, Role, Value — icon-only buttons (menu, search, close) need an accessible name, custom controls need the right role and state (for example aria-expanded on a menu button), and every input needs a label.
• 3.1.1 Language of Page — set <html lang="en"> so screen readers use the right voice and pronunciation.

What MobileCheck checks automatically

The free mobile check loads your page on iPhone (WebKit) and Android (Chromium) screens and reports, with screenshots:

• text size and WCAG AA text contrast (1.4.3);
• tap targets under 24 × 24 CSS px with close neighbours (2.5.8);
• sideways scrolling and content wider than the screen (1.4.10);
• a missing or fixed-width viewport tag, and disabled pinch-zoom (1.4.4);
• clipped or overlapping text with the text size raised to 150% (1.4.4);
• how the page looks in dark mode;
• common markup problems found with axe-core rules: images without alt text, form fields without labels, buttons and links without names, a missing lang or page title, skipped heading levels and invalid ARIA (1.1.1, 4.1.2, 3.1.1, 2.4.2).

That covers many of the most common failures, but not WCAG as a whole. No automated tool can tell whether alt text is meaningful, whether a gesture has an alternative, or whether a login works with VoiceOver; the W3C says evaluation tools can't determine accessibility on their own. Finish with a manual pass on a real phone: turn on VoiceOver (iPhone) or TalkBack (Android), raise the system text size, rotate the screen, and complete your main tasks. For the legal side, see ADA website compliance and the European Accessibility Act.

Sources

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2
• W3C: What's New in WCAG 2.2
• W3C: Understanding SC 1.4.10 Reflow
• W3C: Understanding SC 2.5.8 Target Size (Minimum)
• W3C: Selecting Web Accessibility Evaluation Tools

Related guides