phone readability
Easy to read and use on a phone.
A free guide to readable type, tap targets, contrast and layout, from the design rules behind the Website Health Report.
- WCAG 1.4.4Body text is 16 px or largerchecked
- WCAG 1.4.3Text contrast is at least 4.5 to 1checked
- WCAG 1.4.4Pinch zoom workschecked
- WCAG 1.4.10Pages fit a 360 px screenchecked
- WCAG 1.1.1Every image has alt textchecked
12 phone checks on every Website Health Report
Is your website easy to read on a phone?Enter
- 46guidelinesOn reading and using a website on a phone
- 4topicsTouch, type, contrast and layout
- 12phone checksOn every Website Health Report
- 27cite WCAGGuidelines tied to a WCAG 2.2 success criterion
guidelines
Four topics, one small screen.
46 guidelines on what makes a page easy to read and use on a phone, each with what to do and what to avoid.
Tap targets and touch
Thumbs are not mouse pointers. Tap targets, zoom, gestures and the edges of a phone screen.
Read the 11 guidelinesReadable type and words
Text people can read on a small screen: line length, text size, plain words and headings that say something.
Read the 11 guidelinesContrast and accessibility
Contrast, focus, alt text and reflow, so everyone can read and use the page, in sunlight or with a screen reader.
Read the 12 guidelinesLayout and navigation
A layout that stays the same from page to page: the same menu in the same order, a skip link and a clear mark on the current page.
Read the 12 guidelines
on the report
12 checks in Easy to read on a phone.
The Website Health Report runs these on every page it reads. 10 of them have a guideline here that explains why.
Body text is 16 px or larger
Small body text is hard to read on a phone.
- Fix: Set body copy, links and form text to 16 px or larger.
- WCAG 2.2 success criterion 1.4.4
Text contrast is at least 4.5 to 1
Low contrast text is unreadable in sunlight and for many readers. Measured on solid backgrounds only.
- Fix: Darken the text or lighten the background until the ratio is at least 4.5 to 1.
- WCAG 2.2 success criterion 1.4.3
Pinch zoom works
A viewport that forbids zoom stops readers enlarging text on a phone.
- Fix: Remove user-scalable=no and maximum-scale=1 from the viewport tag.
- WCAG 2.2 success criterion 1.4.4
Pages fit a 360 px screen
Content wider than a phone screen forces sideways scrolling and hides buttons. The report loads each page at 360 px, a common phone width. The guideline asks for a layout that still works at 320 px.
- Fix: Constrain wide elements with max-width 100 percent and let tables scroll inside their own box.
- WCAG 2.2 success criterion 1.4.10
Every image has alt text
Screen readers and search engines cannot tell what the image shows.
- Fix: Give every meaningful image an alt attribute and an empty alt to decorative ones.
- WCAG 2.2 success criterion 1.1.1
Every button and link has a name
A control with no text or label cannot be read out or understood by assistive tools.
- Fix: Give every button and link visible text or an aria-label.
- WCAG 2.2 success criterion 4.1.2
Tap targets are at least 24 px
Small links and buttons are missed on a phone, so visitors tap the wrong thing or give up. The report flags anything under 24 px, the WCAG 2.2 minimum. The guideline's 44 px is the comfortable size to aim for.
- Fix: Make every link, button and form control at least 24 px on each side with space between them.
- WCAG 2.2 success criterion 2.5.8
Heading levels run in order
Jumping from H1 to H3 breaks the outline that readers and assistive tools navigate by.
- Fix: Nest headings in order with no level skipped.
- WCAG 2.2 success criterion 1.3.1
Every page declares its language
Screen readers and translation tools read the lang attribute to pronounce and translate the page correctly.
- Fix: Add lang="en" (or the page's language) to the <html> tag.
- WCAG 2.2 success criterion 3.1.1
No element forces the tab order
A tabindex above 0 pulls keyboard focus out of the page's reading order and confuses keyboard users.
- Fix: Remove positive tabindex values and let the page order carry focus.
- WCAG 2.2 success criterion 2.4.3
Every page has a main landmark
Screen reader users jump to the main landmark to skip the header; without one they read the whole page.
- Fix: Wrap the page's main content in a <main> element.
- WCAG 2.2 success criterion 1.3.1
Every page has a skip link
Keyboard users tab through the whole header on every page unless a skip link jumps them to the content.
- Fix: Add a 'Skip to content' link as the first focusable element, pointing at the main landmark.
- WCAG 2.2 success criterion 2.4.1
how it works
Read it, check it, keep it right.
Read the guidelines
What makes a page easy to read and use on a phone, topic by topic.
Run the free check
The free website health check on uplinkd.com runs the report's phone checks on any site.
Keep it right
The Website Health Report runs them again each month and lists what to fix, most important first.
questions
Questions, answered.
What is UXPlate?
A free guide to what makes a website easy to read and use on a phone, from Uplinkd Group. It is the design and phone-readability side of the Website Health Report: the guidelines here explain the checks the report runs.
What does it cost?
Nothing. Read every guideline here. There is no sign-up and nothing to buy on this site.
Where do the guidelines come from?
From the design rules Uplinkd Group keeps for its own work, the same rules behind the report's phone checks. 27 of the 46 guidelines cite the WCAG 2.2 success criterion they meet.
What does the Health Report check on a phone?
Its Easy to read on a phone section runs 12 checks on every page, such as body text is 16 px or larger, text contrast is at least 4.5 to 1 and pinch zoom works. The free website health check on uplinkd.com runs them on any site.
Why do the report and a guideline give different sizes?
The report flags anything under 24 px, the WCAG 2.2 minimum. The guideline's 44 px is the comfortable size to aim for. The report loads each page at 360 px, a common phone width. The guideline asks for a layout that still works at 320 px.
Does this site track me?
No. This site loads no analytics or tracking scripts. The privacy policy has the detail.
See how your website reads on a phone.
Run the free website health check on any site, then keep it easy to read with the Website Health Report each month.