How do you convert px to rem?

rem equals the px size divided by the root font size. With the standard 16px root, 14px becomes 0.875rem and 24px becomes 1.5rem. Changing the root font size changes every rem-based size proportionally.

Why use rem instead of px for fonts?

Font sizes set in rem or em respond to the user's browser font-size preference and zoom, while a hard px value can ignore those settings in some contexts. Using rem makes your typography honour the user's accessibility choices.

What does WCAG 1.4.4 require?

Resize Text requires that text can be scaled up to 200 percent without loss of content or functionality, and without needing assistive technology. The zoom table here shows the rendered size at 200 percent so you can confirm text grows and remains readable.

What is the smallest font size I should use?

There is no fixed minimum in WCAG, but 16px is the common recommendation for body text and anything under about 14px at 100 percent zoom becomes hard to read. The tool warns below 14px and more strongly below 12px.

Does changing the root size affect the rendered px?

Yes if your size is expressed in rem. A 1rem size renders at 16px with a 16px root but at 20px with a 20px root. The converter lets you set the root so the rem value and rendered sizes match your actual CSS.

Font Size to rem Accessibility Converter

Pixel font sizes are easy to reason about but they can fight against the user’s own accessibility settings. Converting to rem keeps your typography flexible and your design honest about how text behaves when someone zooms in. This converter gives you the exact rem value and shows what happens at the zoom levels WCAG cares about.

How it works

The core conversion is a single division:

rem = px / rootPx

Browsers default the root (the html element font size) to 16px, so 14px is 0.875rem and 24px is 1.5rem. If your CSS sets a different root, change the root field and the rem value updates.

Zoom and WCAG 1.4.4

Browser zoom multiplies the rendered size by the zoom factor:

renderedPx = basePx * (zoomPercent / 100)

WCAG 1.4.4 Resize Text requires that content scales to 200 percent and stays usable. The table shows the rendered size at 100, 150, 200 and 400 percent so you can confirm the text grows rather than getting clipped or overlapping. The 200 percent row is highlighted because it is the conformance target.

The small-text warning

There is no hard minimum in the guidelines, but readability suffers below about 14px at default zoom. The tool warns when your size is under 14px, and warns more strongly under 12px, because text that starts too small is uncomfortable even before a user needs to zoom.

Example

A 14px size on a 16px root:

14 / 16 = 0.875rem
100% zoom -> 14px
200% zoom -> 28px

Bumping the base to 16px (1rem) gives a more comfortable starting point and a 32px size at 200 percent zoom.

Tips

Set body text at 1rem (16px) and scale headings with rem multiples for a consistent, accessible scale.
Prefer rem or em over px for font sizes so text honours the user’s preferences.
Test real pages at 200 percent zoom in the browser, not just the numbers here, to catch layout breakage.
All calculation is local to your browser. Nothing is uploaded.