Size Testing

Screen size and magnification

It’s important to test your site using the developer tools on different devices, to make sure it behaves properly at different scales and proportions. We already do this as part of responsive design and development, but WCAG sets very specific thresholds for accessibility purposes.

You should:

Use developer tools to view on different screen sizes.
Use browser zoom to view at different magnifications on different screen sizes. The site should have no loss of content or functionality at least at 200% zoom, ideally up to 400% zoom.
Ensure that users viewing the site at a high magnification don’t have to scroll in two directions (unless absolutely necessary). That means:
- For vertical scrolling (most situations): ensure no loss of content or functionality (without requiring horizontal scroll) at a width equivalent to 320 CSS pixels. For example:
  - Width of 320 pixels at 100% zoom.
  - Width of 1280 pixels at 400% zoom.
- For horizontal scrolling (rare): similar as above, but at a height equivalent to 256 CSS pixels.

Typography

You need to make sure that default typography sizes and spacing can be overridden by the user without loss of content or functionality. You can use developer tools to try the CSS code below and check if your site displays properly with an increased base font size and the minimum spacing required:

* {
line-height: 1.5em !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}

:root {
font-size: 25px !important;
}

p {
margin-top: 2em !important;
margin-bottom: 2em !important;
}