Accessibility with 2x font zoom

Ensure that text can be doubled in size

Unlike some WCAG g0uidelines, success criterion 1.4.4 is quite straightforward:

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Unlike Reflow that I was writing about a few days ago, however, this one can be tricky to achieve.

Especially if you, like me, have not consistently used relative units (e.g. em and rem) for fonts and other sizes in your CSS/SCSS.

How to fix it

Here are the primary pieces you should put in place:

1. Use a root font size of 16px. Add this to body, html or the pseudo-selector :root, like so:

  :root {
    font-size: 16px; 
  }

2. Everywhere else (probably, with the exception of borders, box-shadows, and importantly break points, see below), define units with rem, like so:

  .awesome-div {
    font-size: 1rem; 
    margin-bottom: 0.375rem;
    margin-top: 1rem; 
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    min-height: 12rem; 
  }

3. Testing how this responds to 2x font zoom is easy. Just open the console, and change root to:

  :root {
    font-size: 32px; 
  }

I recommend going ahead and using rem for everthing, to base sizes relative to the root of 16px. You could also mix in em if you have a need to do so, as long as some parent is defined in rem.

Everything should be good to go, except that it might be ugly. Especially if you haven’t defined breakpoints in em or rem.

Bootstrap 4 introduced rem and em units for almost everything in the release of BS 4. Interestingly, though, they did not extend this to the grid, and that was[] on purpose](https://getbootstrap.com/docs/4.6/layout/grid/#grid-options):

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

This may also be related to a Safari bug, where Safari doesn’t handle rem based media queries correctly.

How to comply

With the above in place, your website should be compliant to WCAG 1.4.4, despite the fact that grid columns written using px will get very narrow, and the page will arguably be quite ugly. As long as text is readable, and complies with requirements spelled out in the “Reflow” requirement, they you should be good to go.