CSS unit checker
Paste CSS and see which declarations use a unit in a way that trips readers who enlarge text, zoom or use a phone.
The check runs in this page. Nothing you paste is sent anywhere.
The checker needs JavaScript to run. The list of what it looks for is below, and every rule links to the unit it is about.
What it looks for
- Root font size in pixels
A root size written in pixels switches off the reader's default font size: rem stays where you put it. Leave the root alone, or use a percentage.
- Text size in pixels
A size in pixels ignores the default font size the reader chose in the browser. Page zoom still enlarges it, a larger default does not. Use rem.
- Line height in pixels
A fixed line height does not follow the text. When the reader enlarges the text the lines crowd each other. Write a plain number.
- Line height in em or percent
With an em or a percentage, children inherit the parent's resulting length and not the rule, so a child with larger text keeps the parent's line height. A plain number is inherited as a ratio.
- Text sized in viewport units alone
Text in vw, vh or vmin alone does not grow with page zoom, which can fail the 200% enlargement that WCAG 1.4.4 asks for. Add a rem term, as in clamp(1rem, 0.5rem + 2vw, 2rem), and test it at 200%.
- 100vh for a full-height box
100vh is defined as the large viewport, so on a browser with retractable toolbars the box can be taller than what is visible. Write a vh line first and then 100svh or 100dvh after it.
- 100vw for a width
100vw includes the room a classic scrollbar takes, so a block of that width scrolls the page sideways. A block-level element with width auto fits the room exactly.
- height: 100% on an element
A percentage height needs a parent with a height of its own. Where the parent is as tall as its content, 100% behaves as auto. Check the parents, or use min-block-size.
- Breakpoint in pixels
A breakpoint in pixels stays put when the reader raises the default font size. In em it moves with the reader, so larger text gets the narrow layout sooner.
What it cannot see
- It reads the text you paste, not the page. A height of 100% is flagged on every element, because the checker cannot tell whether the parent has a height of its own.
- It does not follow imports, custom properties or preprocessor code, so a size hidden behind a variable is not seen.
- It finds the declarations that usually cause trouble. Each one can be right in its place, such as a hairline in pixels.